import { Dispatch, SetStateAction } from "react";
import { ClassNames, DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
import styles from "react-day-picker/dist/style.module.css";
export interface DatePickerProps {
  datesAvailableForBookings: string[];
  fromMonth?: Date;
  toMonth?: Date;
  defaultMonth?: Date;
  selectedDays?: Date[];
  onSelectDate?: Dispatch<SetStateAction<Date[] | undefined>>;
  dateSelection?: "single" | "multiple" | "range" | "default";
}
const DatePicker = ({
  datesAvailableForBookings,
  fromMonth,
  toMonth,
  defaultMonth,
  onSelectDate,
  selectedDays = [],
  ...props
}: DatePickerProps) => {
  const classNames: ClassNames = {
    ...styles,
    root: "w-max !m-0 rdp ",
    nav_button_next:
      "!h-11.5 !w-11.5 !rounded-lg hover:!bg-blue-25 disabled:bg-transparent disabled:pointer-events-none disabled:!text-zinc-25",
    nav_button_previous:
      "!h-11.5 !w-11.5 !rounded-lg hover:!bg-blue-25 disabled:bg-transparent disabled:pointer-events-none disabled:!text-zinc-25",
    caption_label: "text-base text-mono-700 font-semibold",
    nav: "flex items-center gap-2",
    nav_icon: "h-3.5 w-3.5",
    table: "!mt-3 !border-spacing-1 !border-separate",
    head_cell: "h-16 w-16 p-0 text-sm",

    cell: "!h-16 !w-16",
    day: "cursor-pointer rounded-full !h-16 !max-w-full !w-16 bg-gray-100 hover:bg-mono-200",
    button: " ",
    button_reset: "",
    day_selected:
      "cursor-pointer bg-primary-500 hover:bg-primary-500 text-white",
    day_disabled:
      "bg-transparent text-zinc-50 pointer-events-none cursor-default",
  };

  return (
    <DayPicker
      classNames={classNames}
      mode={"multiple"}
      selected={selectedDays}
      defaultMonth={defaultMonth || new Date()}
      onSelect={(days) => onSelectDate && onSelectDate(days)}
      fromMonth={fromMonth}
      toMonth={toMonth}
      disabled={(date) =>
        !!datesAvailableForBookings?.length &&
        !datesAvailableForBookings?.includes(date.toString())
      }
      {...props}
    />
  );
};

export { DatePicker };
