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

import FormControlLabel from '@material-hu/mui/FormControlLabel';
import Switch, { type SwitchProps } from '@material-hu/mui/Switch';
import Typography from '@material-hu/mui/Typography';

type Props = SwitchProps & {
  label?: string;
  subLabel?: string;
};

/**
 * @deprecated Use `@material-hu/components/design-system/Inputs/Switcher` instead
 */
function FormSwitch(props: Props) {
  const { control } = useFormContext();
  const { name, label, subLabel, ...other } = props;

  return (
    <FormControlLabel
      control={
        <Controller
          render={({ field }) => (
            <Switch
              {...field}
              {...other}
              checked={!!field.value}
              defaultValue={field.value}
            />
          )}
          name={name}
          control={control}
        />
      }
      label={
        label && (
          <div>
            <Typography
              gutterBottom
              variant="subtitle2"
            >
              {label}
            </Typography>
            {subLabel && (
              <Typography
                color="textSecondary"
                variant="body2"
              >
                {subLabel}
              </Typography>
            )}
          </div>
        )
      }
    />
  );
}

export default FormSwitch;