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

import Checkbox, { type CheckboxProps } from '@material-hu/mui/Checkbox';
import FormControlLabel from '@material-hu/mui/FormControlLabel';

type Props = CheckboxProps & {
  label: ReactNode;
  rules?: any;
  error?: boolean;
};

/**
 * @deprecated Use `@material-hu/components/design-system/Inputs/Checkbox/form` instead
 */
function FormCheckbox({ label, name, rules, sx, ...other }: Props) {
  const { control } = useFormContext();

  return (
    <FormControlLabel
      control={
        <Controller
          rules={rules}
          render={({
            field: { ref, value, ...field },
            fieldState: { error },
          }) => (
            <Checkbox
              inputRef={ref}
              error={error ? 1 : 0}
              checked={!!value}
              sx={{
                p: '0 6px',
                pl: 0,
                alignSelf: 'flex-start',
              }}
              {...field}
              {...other}
            />
          )}
          name={name}
          control={control}
        />
      }
      label={label}
      sx={{
        ml: 0,
        ...sx,
      }}
    />
  );
}

export default FormCheckbox;