// form
import { useFormContext, Controller } from 'react-hook-form';
// @mui
import { FormHelperText, TextField } from '@mui/material';
import { DesktopDatePicker, LocalizationProvider, TimePicker } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';

// ----------------------------------------------------------------------

interface IProps {
  name: string;
  label: string;
  fullWidth?: boolean;
  disabled?: boolean;
}

export default function RHFTimePicker({ name, label, disabled, ...other }: IProps) {
  const { control } = useFormContext();

  const { fullWidth } = other;

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Controller
        name={name}
        control={control}
        render={({ field, fieldState: { error } }) => (
          <>
            <TimePicker
              disabled={disabled}
              label={label}
              onChange={(date) => field.onChange(date)}
              value={field.value}
              renderInput={(params) => <TextField fullWidth={fullWidth} {...params} />}
            />
            {!!error && (
              <FormHelperText error sx={{ px: 2 }}>
                {error.message}
              </FormHelperText>
            )}
          </>
        )}
      />
    </LocalizationProvider>
  );
}