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

import { DesktopDatePicker } from '@material-hu/mui/x-date-pickers/DesktopDatePicker';

export type DateInputProps = {
  name: string;
  disablePast?: boolean;
};

const DateInput: FC<DateInputProps> = props => {
  const { name, disablePast = true } = props;

  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <DesktopDatePicker
          disablePast={disablePast}
          {...field}
          slotProps={{
            popper: {
              placement: 'auto-start',
            },
            textField: {
              inputProps: { placeholder: 'dd/mm/aaaa' },
              onKeyDown: e => {
                e.preventDefault();
              },
            },
          }}
        />
      )}
    />
  );
};

export default DateInput;
