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

import { isString } from 'lodash-es';
import { CalendarIcon } from '@material-hu/mui/x-date-pickers';
import {
  DatePicker,
  type DatePickerProps,
} from '@material-hu/mui/x-date-pickers/DatePicker';
import { type ExportedUseDesktopPickerSlotProps } from '@material-hu/mui/x-date-pickers/internals/hooks/useDesktopPicker';

import {
  getEndOfDay,
  getStartOfDay,
  simpleDateStringToLocalDate,
} from 'src/utils/timeUtils';

type Props = {
  textFieldProps?: ExportedUseDesktopPickerSlotProps<
    Date,
    any,
    boolean
  >['textField'];
  datePickerProps?: Partial<DatePickerProps<Date>>;
  name: string;
  isStart?: boolean;
  validateRules?: any;
  pickerIcon?: ElementType;
};

function FormDatePicker({
  datePickerProps,
  textFieldProps,
  name,
  isStart = true,
  validateRules,
  pickerIcon = CalendarIcon,
}: Props) {
  const { control } = useFormContext();

  return (
    <Controller
      render={({ field, fieldState: { error } }) => (
        <DatePicker
          slots={{
            openPickerIcon: pickerIcon,
          }}
          slotProps={{
            textField: {
              ...textFieldProps,
              inputProps: {
                readOnly: true,
              },
              error: !!error,
              // biome-ignore lint/suspicious/noExplicitAny: <Fix types>
              helperText: error?.message || (textFieldProps as any)?.helperText,
            },
          }}
          {...datePickerProps}
          {...field}
          onChange={value =>
            field.onChange((isStart ? getStartOfDay : getEndOfDay)(value))
          }
          // if string is '2021-03-25' we understand that is UTC time and we need a local Date object with the same values.
          // if user changes input, the value is now a local Date object that must be UTCed before sending to backend
          value={
            isString(field.value)
              ? simpleDateStringToLocalDate(field.value)
              : field.value
          }
        />
      )}
      name={name}
      control={control}
      rules={{ validate: validateRules }}
    />
  );
}

export default FormDatePicker;