import "@/components/common/date-picker.css";
import {
  DatePicker as BaseDatePicker,
  DatePickerProps,
  DateValue,
} from "@nextui-org/react";
import { ControllerFieldState } from "react-hook-form";
import { CalendarDate } from "@internationalized/date";
import { useState } from "react";

type DatePickerCustomProps = {
  fieldProps: any;
  fieldState: ControllerFieldState;
  isClient?: boolean;
  control?: any;
  name?: string;
};

type PickerProps = DatePickerCustomProps & DatePickerProps;

function DatePicker({
  label,
  isRequired = true,
  defaultValue,
  variant = "faded",
  color,
  size,
  placeholderValue,
  minValue,
  maxValue,
  description,
  startContent,
  endContent,
  isReadOnly,
  isDisabled,
  showMonthAndYearPickers,
  isInvalid,
  inputRef,
  hourCycle = 24,
  granularity,
  labelPlacement = "outside",
  hideTimeZone,
  shouldForceLeadingZeros = true,
  disableAnimation,
  fieldProps,
  fieldState,
  isClient,
  classNames = {
    base: "light text-black font-bold",
    innerWrapper: "text-black",
    label: "block text-sm font-bold tracking-tight font-inter text-pretty",
    input: `font-noto ${fieldState?.invalid || isInvalid ? "text-black" : ""}`,
    inputWrapper: `${fieldState?.invalid || isInvalid ? "text-black" : ""}`,
    description:
      "font-inter font-regular text-[12px] text-gray-500 leading-tight",
    selectorIcon: `${
      isClient ? "text-userViewingBlue" : "text-saffron dark:text-persian-green"
    }`,
    calendar: "font-noto",
  },
}: PickerProps) {
  const parseDate = (dateString: string): CalendarDate => {
    const [day, month, year] = dateString.split("/").map(Number);
    return new CalendarDate(year, month, day);
  };

  const [date, setDate] = useState<DateValue | undefined>(
    fieldProps.value ? parseDate(fieldProps.value) : undefined,
  );

  const handleOnChange = (newValue: DateValue) => {
    setDate(newValue);

    const isFullyValid = Boolean(
      newValue?.day && newValue?.month && newValue?.year,
    );

    newValue &&
      isFullyValid &&
      fieldProps.onChange(
        `${String(newValue.day).padStart(2, "0")}/${String(
          newValue.month,
        ).padStart(2, "0")}/${newValue.year}`,
      );
  };

  return (
    <BaseDatePicker
      {...fieldProps}
      classNames={classNames}
      color={color}
      defaultValue={defaultValue}
      description={description}
      disableAnimation={disableAnimation}
      endContent={endContent}
      granularity={granularity}
      hideTimeZone={hideTimeZone}
      hourCycle={hourCycle}
      id={fieldProps?.name}
      inputRef={inputRef}
      isDisabled={isDisabled}
      isInvalid={fieldState.invalid ?? isInvalid}
      isReadOnly={isReadOnly}
      isRequired={isRequired}
      label={label}
      labelPlacement={labelPlacement}
      maxValue={maxValue}
      minValue={minValue}
      placeholderValue={placeholderValue}
      radius="sm"
      shouldForceLeadingZeros={shouldForceLeadingZeros}
      showMonthAndYearPickers={showMonthAndYearPickers}
      size={size}
      startContent={startContent}
      value={date}
      variant={variant}
      onChange={handleOnChange}
    />
  );
}

export default DatePicker;