import React from 'react';
import { Box, Typography } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { useFormContext, Controller } from 'react-hook-form';
import dayjs, { Dayjs } from 'dayjs';

export interface DatePickerFormFieldProps {
  name: string;
  label: string;
  defaultValue?: string | Date | Dayjs | null;
  required?: boolean;
  disabled?: boolean;
  helperText?: string;
  minDate?: string | Date | Dayjs;
  maxDate?: string | Date | Dayjs;
  format?: string;
}

export function DatePickerFormField({
  name,
  label,
  defaultValue = null,
  required = false,
  disabled = false,
  helperText,
  minDate,
  maxDate,
  format = 'YYYY-MM-DD',
}: DatePickerFormFieldProps) {
  const { control, formState: { errors } } = useFormContext();
  const error = errors[name];

  const datePicker = (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Controller
        name={name}
        control={control}
        defaultValue={defaultValue ? dayjs(defaultValue) : null}
        render={({ field }) => (
          <DatePicker
            {...field}
            disabled={disabled}
            minDate={minDate ? dayjs(minDate) : undefined}
            maxDate={maxDate ? dayjs(maxDate) : undefined}
            format={format}
            slotProps={{
              textField: {
                required,
                error: !!error,
                helperText: error?.message as string || helperText,
                fullWidth: true,
                variant: 'outlined',
              },
            }}
          />
        )}
      />
    </LocalizationProvider>
  );

  return datePicker;
}