import { Controller, useFormContext } from 'react-hook-form';

import Switch from '~/src/components/Switch';
import { FormField } from './FormField';
import { FormCustomField } from './types';

export const FormSwitchControl = (props: FormCustomField) => {
  const { control } = useFormContext();

  const { name } = props;

  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, value } }) => (
        <Switch onChange={(value) => onChange(value)} value={value} />
      )}
    />
  );
};

export const FormSwitch = (props: FormCustomField) => {
  return (
    <FormField {...props}>
      <FormSwitchControl {...props} />
    </FormField>
  );
};