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

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

interface IProps {
  name: string;
  label: string;
  dateFormat: string;
  fullWidth?: boolean;
  onChange?: (date: any) => void;
  disabled?: boolean;
}

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

  const { fullWidth, onChange, disabled } = other;

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