import { ErrorMessage } from "formik";
import DatePicker from "react-datepicker";
import { Label } from "reactstrap";
import "react-datepicker/dist/react-datepicker.css";

// Define the prop types for InputDatePicker
interface InputDatePickerProps {
  selected: Date | null; // selected should be a Date object or null
  onChange: (date: Date | null) => void;
  maxDate?: Date;
  minDate?: Date;
  name: string;
  ref?: React.Ref<HTMLInputElement>;
  placeholderText?: string;
  disabled?: boolean;
  label: string;
  errors?: Record<string, string | undefined>; // errors should be a record with string keys and string values or undefined
  dateFormat?: string;
  showAsterisk?: boolean; // showAsterisk should be a boolean
}

const InputDatePicker = ({
  selected,
  onChange,
  maxDate,
  minDate,
  name,
  placeholderText,
  disabled,
  label,
  errors,
  dateFormat,
  showAsterisk,
}: InputDatePickerProps) => {
  console.log(errors?.[name], "errors", name); // Log the error for the specific field
  return (
    <div className="col-md-6 mb-2">
      <div className="row">
        <Label className="col-md-5 items-label">
          {label}
          {showAsterisk && <span className="text-danger px-1">*</span>}
        </Label>
        <div className="col-md-7">
          <DatePicker
            name={name}
            selected={selected}
            onChange={onChange}
            dateFormat={dateFormat}
            showYearDropdown
            scrollableYearDropdown
            yearDropdownItemNumber={100}
            placeholderText={placeholderText || "DD-MM-YYYY"}
            className={`form-control-sm form-control ${
              errors?.[name] ? "is-invalid" : "is-valid"
            }`}
            showIcon
            maxDate={maxDate}
            minDate={minDate}
            disabled={disabled}
          />
          <ErrorMessage name={name} component="div" className="text-danger large" />
        </div>
      </div>
    </div>
  );
};

export default InputDatePicker;