const App: React.FunctionComponent = () => {
  const { handleSubmit, control } = useForm();

  /**
   *
   * @param data
   */
  const onSubmit = (data: any) => {
    debugger;
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <IonApp>
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start">
              <IonBackButton />
            </IonButtons>
            <IonTitle>Detail</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <p>Details</p>
          <form onSubmit={handleSubmit(data => console.log(data))}>
            <IonItem>
              <IonLabel>Gender</IonLabel>
              <Controller
                render={({ onChange, onBlur, value }) => (
                  <IonSelect placeholder="Select One" onIonChange={onChange}>
                    <IonSelectOption value="FEMALE">Female</IonSelectOption>
                    <IonSelectOption value="MALE">Male</IonSelectOption>
                  </IonSelect>
                )}
                control={control}
                name="gender"
                rules={{ required: true }}
              />
            </IonItem>
            <IonItem>
              <IonLabel>Email</IonLabel>
              <Controller
                render={({ onChange, onBlur, value }) => (<IonInput onIonChange={onChange}/>)}
                control={control}
                name="email"
                rules={{
                  required: true,
                  pattern: {
                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                    message: "invalid email address"
                  }
                }}
              />
            </IonItem>
            <IonItem>
              <Controller
                render={({ onChange, onBlur, value }) => (
                  <IonRange
                    min={-200}
                    max={200}
                    color="secondary"
                    onIonChange={onChange}
                  >
                    <IonLabel slot="start">-200</IonLabel>
                    <IonLabel slot="end">200</IonLabel>
                  </IonRange>
                )}
                control={control}
                name="rangeInfo"
                rules={{ required: true }}
              />
            </IonItem>
            <IonButton type="submit">submit</IonButton>
          </form>
        </IonContent>
      </IonPage>
    </IonApp>
  );
};