const FormExample = () => {
  const [defaultValues, setDefaultValues] = useState(
    {}
  );
  const {
    control,
    register,
    handleSubmit,
    watch,
    reset,
  } = useForm({ defaultValues });
  const [data, setData] = useState({});

  const setDefaultValuesFunc = (e) => {
    console.log(e.target.value);
    try {
      const values = JSON.parse(e.target.value);
      setDefaultValues(values);
    } catch (e) {
      console.log(e);
    }
  };

  const resetInputs = () => {
    reset(defaultValues);
  };
  const currentValues = watch();

  return (
    <>
      <form
        onSubmit={handleSubmit((data) =>
          setData(data)
        )}
      >
        <>
          <Select
            labelText="The uncontrolled Input"
            helperText="Optional helperText"
            {...register("inputname")}
          >
            <SelectItem text="Option 1" value="1" />
            <SelectItem text="Option 2" value="2" />
            <SelectItem text="Option 3" value="3" />
          </Select>

          <Controller
            name="inputnameB"
            control={control}
            render={({ field }) => {
              return (
                <Select
                  labelText="The controlled Input"
                  helperText="Optional helperText"
                  {...field}
                  onChange={(e) =>
                    field.onChange(e.target.value)
                  }
                  value={field.value}
                >
                  <SelectItem
                    text="Option 1"
                    value="1"
                  />
                  <SelectItem
                    text="Option 2"
                    value="2"
                  />
                  <SelectItem
                    text="Option 3"
                    value="3"
                  />
                </Select>
              );
            }}
          />
        </>
        <Button type="submit">Submit</Button>{" "}
        <Button onClick={resetInputs} kind="secondary">
          Reset
        </Button>
        <div className="debug">
          <h4>Submitted form data</h4>
          <pre>{JSON.stringify(data, null, 2)}</pre>

          <h4>Current values</h4>
          <pre>
            {JSON.stringify(currentValues, null, 2)}
          </pre>

          <TextInput
            labelText="Default values (editable)"
            defaultValue={JSON.stringify(
              defaultValues
            )}
            onChange={setDefaultValuesFunc}
          />
        </div>
      </form>
    </>
  );
};

render(<FormExample />);