"use client";

import * as React from "react";

import { DayPicker } from "react-day-picker";

import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from "@astraicons/react/linear";

import { cn } from "../../lib/utils";

export type CalendarProps = React.ComponentProps<typeof DayPicker>;

type MonthsDropdownProps = {
  months: string[];
  handleMonthChange: (month: string) => void;
};
// dropdown component for month list
const MonthsDropdown = ({ months, handleMonthChange }: MonthsDropdownProps) => {
  return (
    <div className="grid grid-cols-3 gap-2 place-items-center text-sm absolute mt-16 inset-0 w-fit h-fit min-[300px]:h-[70%] m-auto">
      {months.map((month, index) => {
        return (
          <button
            type="button"
            key={index}
            onClick={() => handleMonthChange(month)}
            className="text-grayscale-textIcon-caption text-sm leading-[1.375rem] h-fit-w-fit py-2 hover:text-grayscale-textIcon-title transition-colors"
          >
            {month}
          </button>
        );
      })}
    </div>
  );
};

type YearsDropdownProps = {
  years: number[];
  handleYearChange: (year: number) => void;
};
// dropdown component for year list
const YearsDropdown = ({ years, handleYearChange }: YearsDropdownProps) => {
  //Reversing the years array to show the latest year first
  const reversedYears = [...years].reverse();

  return (
    <div className="grid grid-cols-4 gap-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-primary-500 absolute inset-0 w-[85%] h-48 min-[300px]:h-[70%] mx-auto ml-6 mt-16 mb-4 place-items-center pr-2">
      {reversedYears.map((year, index) => {
        return (
          <button
            type="button"
            key={index}
            onClick={() => handleYearChange(year)}
            className="text-grayscale-textIcon-caption text-sm leading-[1.375rem] h-fit-w-fit py-2 hover:text-grayscale-textIcon-title transition-colors"
          >
            {year}
          </button>
        );
      })}
    </div>
  );
};

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  fixedWeeks,
  fromYear = 1960,
  toYear = 2025,
  formatters = {
    formatWeekdayName: (weekday) =>
      new Intl.DateTimeFormat("en-US", { weekday: "narrow" }).format(weekday),
  },
  month,
  ...props
}: CalendarProps) {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [months, setMonths] = React.useState([
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ]);
  const [currentMonth, setCurrentMonth] = React.useState(
    month?.toLocaleString("default", { month: "long" })
  );
  const [currentYear, setCurrentYear] = React.useState<number | undefined>(
    month?.getFullYear()
  );
  const [years, setYears] = React.useState<number[]>([]);

  //state for month and year dropdown toggle
  const [monthDropToggle, setMonthDropToggle] = React.useState<boolean>(false);
  const [yearDropToggle, setYearDropToggle] = React.useState<boolean>(false);

  React.useEffect(() => {
    //use the fromYear and toYear to generate an array of years
    const years = [];
    for (let i = fromYear; i <= toYear; i++) {
      years.push(i);
    }
    setYears(years);
  }, [fromYear, toYear]);

  React.useEffect(() => {
    const date = new Date();
    const month = date.toLocaleString("default", { month: "long" });
    setCurrentMonth(month);
  }, []);

  const handleMonthChange = (newMonth: string) => {
    setCurrentMonth(newMonth);
    setMonthDropToggle(false);
  };

  const handleYearChange = (newYear: number) => {
    setCurrentYear(newYear);
    setYearDropToggle(false);
  };

  return (
    <div className="relative h-fit w-fit no-highlights">
      <DayPicker
        showOutsideDays={showOutsideDays}
        fixedWeeks={fixedWeeks}
        formatters={formatters}
        numberOfMonths={1}
        captionLayout="dropdown-buttons"
        fromYear={fromYear}
        toYear={toYear}
        month={new Date(`${currentMonth} 1, ${currentYear}`)}
        onMonthChange={(month) => {
          setCurrentMonth(month.toLocaleString("default", { month: "long" }));
          setCurrentYear(month.getFullYear());
        }}
        //changing styling of weekends
        modifiers={{
          weekend: { dayOfWeek: [0, 6] },
        }}
        modifiersClassNames={{
          weekend: "text-grayscale-textIcon-caption",
        }}
        className={cn(
          "p-4 bg-grayscale-surface/50 border-1.5 border-grayscale-border rounded-[1.125rem] backdrop-blur-xl",
          className
        )}
        classNames={{
          months:
            monthDropToggle || yearDropToggle
              ? "invisible"
              : "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
          month: "",
          caption: "flex",
          caption_dropdowns: "flex items-center",
          caption_label: "hidden",
          dropdown: "hidden",
          dropdown_month: "hidden",
          dropdown_year: "hidden",
          nav: "space-x-1 flex items-center ml-auto",
          nav_button:
            "h-fit w-fit p-0 flex items-center justify-center text-grayscale-textIcon-subtitle",
          nav_button_previous: "",
          nav_button_next: "",
          table: "w-full border-collapse space-y-1",
          head_row: "flex mt-3",
          head_cell:
            "w-9 px-2 py-1 font-normal leading-[1.375rem] text-sm text-grayscale-textIcon-title first:text-grayscale-textIcon-caption last:text-grayscale-textIcon-caption",
          row: "flex w-full",
          cell: "rounded-xl h-9 w-9 p-0 text-center text-sm text-grayscale-textIcon-title relative [&:has([aria-selected].day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 flex items-center justify-center",
          day: "rounded-lg size-6 p-0 hover:bg-grayscale-surface-hover font-normal aria-selected:opacity-100 aria-selected:bg-primary-500 aria-selected:hover:bg-primary-500 flex items-center justify-center",
          day_range_end: "day-range-end",
          day_selected: "day_selected !text-grayscale-textIcon-title",
          day_today: "bg-grayscale-surface-hover",
          day_outside:
            "day-outside text-grayscale-textIcon-caption aria-selected:text-grayscale-textIcon-caption",
          day_disabled: "day-disabled opacity-50",
          day_range_middle: "day_range_middle",
          day_hidden: "invisible",
          ...classNames,
        }}
        components={{
          // IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
          IconLeft: ({}) => (
            <ChevronLeftIcon className="size-6 text-grayscale-textIcon-subtitle" />
          ),
          // IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
          IconRight: ({}) => (
            <ChevronRightIcon className="size-6 text-grayscale-textIcon-subtitle" />
          ),
        }}
        {...props}
      />

      {/* months and year dropdown */}
      <div
        className={`flex flex-col overflow-clip
        ${monthDropToggle || yearDropToggle ? "z-40" : "z-0"}
      `}
      >
        <div className="flex items-center gap-x-1 absolute top-4 left-5 w-fit h-fit">
          {/*current month and toggle*/}
          <button
            type="button"
            onClick={() => {
              setMonthDropToggle(!monthDropToggle);
              setYearDropToggle(false);
            }}
            className="flex items-center gap-1 "
          >
            <span className="text-sm leading-[1.375rem] text-grayscale-textIcon-title">
              {currentMonth}
            </span>
            <ChevronDownIcon
              className={`size-4 text-grayscale-textIcon-subtitle transition ${monthDropToggle ? "-rotate-180" : "-rotate-0"}`}
            />
          </button>
          <button
            type="button"
            onClick={() => {
              setYearDropToggle(!yearDropToggle);
              setMonthDropToggle(false);
            }}
            className="flex items-center gap-1"
          >
            <span className="text-sm leading-[1.375rem] text-grayscale-textIcon-title">
              {currentYear}
            </span>
            <ChevronDownIcon
              className={`size-4 text-grayscale-textIcon-subtitle transition ${yearDropToggle ? "-rotate-180" : "-rotate-0"}`}
            />
          </button>
        </div>

        <div>
          {/*current year and toggle*/}

          {monthDropToggle && yearDropToggle === false ? (
            <MonthsDropdown
              months={months}
              handleMonthChange={handleMonthChange}
            />
          ) : null}
          {yearDropToggle && monthDropToggle === false ? (
            <YearsDropdown years={years} handleYearChange={handleYearChange} />
          ) : null}
        </div>
      </div>
    </div>
  );
}
Calendar.displayName = "Calendar";

export { Calendar };
Components
