"use client";

import { de, enUS, tr } from "date-fns/locale";
import { ChevronLeft, ChevronRight } from "lucide-react";
import * as React from "react";
import type { CustomComponents } from "react-day-picker";
import { DayPicker } from "react-day-picker";

import { cn } from "@/libs/utils";
import { useLocalizationStore } from "@/store/localization-store/use-localization-store";

import { buttonVariants } from "../button/button";
import styles from "./calendar.module.css";

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

const CalendarComponents: CustomComponents = {
  IconLeft: () => <ChevronLeft color="#1D2939" className="size-4" />,
  IconRight: () => <ChevronRight color="#1D2939" className="size-4" />,
};

function Calendar({
  className,
  classNames,
  showOutsideDays = false,
  ...props
}: CalendarProps) {
  const { localizationState } = useLocalizationStore();

  function getLocale() {
    switch (localizationState?.data.language) {
      case "en":
      case "en-US":
        return enUS;
      case "de":
      case "de-DE":
        return de;
      default:
        return tr;
    }
  }

  return (
    <DayPicker
      locale={getLocale()}
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: styles.months,
        month: styles.month,
        caption: styles.caption,
        caption_label: styles.caption_label,
        nav: styles.nav,
        nav_button: cn(
          "!p-0",
          styles.nav_button,
          buttonVariants({ variant: "default" }),
        ),
        nav_button_previous: styles.nav_button_previous,
        nav_button_next: styles.nav_button_next,
        table: styles.table,
        head_row: styles.head_row,
        head_cell: cn(styles.head_cell, "text-muted-foreground"),
        row: styles.row,
        cell: cn(
          styles.cell,
          "[&:has([aria-selected])]:bg-sky-50",
          props.mode === "range"
            ? [
                styles.cell_mode_range,
                `[&:has(>.day-range-end)]:rounded-r-md 
                  [&:has(>.day-range-start)]:rounded-l-md 
                  first:[&:has([aria-selected])]:rounded-l-md 
                  last:[&:has([aria-selected])]:rounded-r-md 
                  [&:has(>.day-range-end)]:!bg-transparent 
                  [&:has(>.day-range-start)]:!bg-transparent 
                  after:[&:has(>.day-range-start)]:absolute 
                  after:[&:has(>.day-range-start)]:w-[12px] 
                  after:[&:has(>.day-range-start)]:h-[24px] 
                  after:[&:has(>.day-range-start)]:bg-sky-50 
                  after:[&:has(>.day-range-start)]:right-[-.1rem] 
                  after:[&:has(>.day-range-end)]:absolute 
                  after:[&:has(>.day-range-end)]:w-[12px]
                  after:[&:has(>.day-range-end)]:h-[24px]
                  after:[&:has(>.day-range-end)]:bg-sky-50
                  after:[&:has(>.day-range-end)]:left-[-.1rem]
                  after:[&:has(>.day-range-end)]:[&:has(>.day-range-start)]:!bg-transparent
                  `,
              ]
            : [
                styles.cell_mode_default,
                "[&:has([aria-selected])]:rounded-primary",
              ],
        ),
        day: cn(styles.day),
        day_range_start: cn(styles.day_range_start, "day-range-start relative"),
        day_range_end: cn(styles.day_range_end, "day-range-end relative"),
        day_selected: styles.day_selected,
        day_today: cn(
          styles.day_today,
          "bg-accent text-accent-foreground today text-primary-500 [&:has(.day-range-today)]:!text-white",
        ),
        day_outside: cn(styles.day_outside, "text-gray-300"),
        day_disabled: cn(styles.day_disabled, "text-muted-foreground"),
        day_range_middle: styles.day_range_middle,
        day_hidden: styles.day_hidden,
        ...classNames,
      }}
      components={CalendarComponents}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";

export { Calendar };