import { useForm } from 'react-hook-form';
import { useTranslation } from 'next-i18next';

const form = useForm();
const { t, i18n } = useTranslation();

const stringData = ['1', '2', '3', '4'];

const data = [
  {
    id: 1,
    name: 'Wade Cooper',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
    image: 'https://source.unsplash.com/user/c_v_r/100x100',
  },
  {
    id: 2,
    name: 'Arlene Mccoy',
    image: 'https://source.unsplash.com/user/c_v_r/100x100',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
  },
  {
    id: 3,
    name: 'Devon Webb',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
    image: 'https://source.unsplash.com/user/c_v_r/100x100',
  },
  {
    id: 4,
    name: 'Tom Cook',
    description:
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
    image: 'https://source.unsplash.com/user/c_v_r/100x100',
  },
];
 <Form
      onSubmit={form.handleSubmit(onSubmit)}
      className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
    >
      <Input
        name="email"
        label="Email"
        type="email"
        form={form}
        validation={Validation(t)
          .required()
          .isEmail()
          .minLength(6)
          .maxLength(24)
          .get()}
      />

      <TextArea
        name="description"
        label="Description"
        rows={4}
        form={form}
        validation={Validation(t).required().minLength(6).get()}
      />

      <AutoComplete
        name="autocomplete"
        label="Multi Auto Complete"
        multiple={true}
        placeholder={t('form:choose')}
        defaultValue={[{ id: 1, name: 'Osma' }]}
        // url="api/manager/units"
        data={data}
        form={form}
        validation={Validation(t).required().get()}
      />

      <ListBox
        name="multi_list_box_image"
        label="Multi Image List Box"
        multiple={true}
        placeholder={t('form:choose')}
        defaultValue={[{ id: 1, name: 'Wade Cooper' }]}
        // url="api/manager/units"
        data={data}
        form={form}
        validation={Validation(t).required().get()}
      />

      <CheckBox
        id="checkbox_single"
        name={'checkbox_single'}
        value="1"
        title="Checkbox Single"
        description="Checkbox Single Description"
        validation={Validation(t).required().get()}
        form={form}
      />

      <CheckBoxGroup
        name="checkbox_multi"
        options={stringData}
        notTitle={true}
        value={['1', '2', '4']}
        validation={Validation(t).required().get()}
        form={form}
      />

      <h4>Single Radio</h4>
      <Radio
        id="radio_single"
        name="radio_single"
        value="1"
        title="Checkbox Single"
        description="Checkbox Single Description"
        validation={Validation(t).required().get()}
        form={form}
      />

      <h4>Group Radio</h4>
      <RadioGroup
        name="radio_object_group"
        options={data}
        validation={Validation(t).required().get()}
        value="2"
        form={form}
      />

      <Button label="Gönder" defaultValue="submit" />
    </Form>