import * as React from "react";
import { DayPicker } from "react-day-picker";
import { ChevronLeft, ChevronRight } from "lucide-react";

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

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

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        "tw-figr-rounded-m tw-figr-border tw-figr-border-neutral-200 tw-figr-bg-base-white tw-figr-p-sm tw-figr-font-secondary",
        className
      )}
      classNames={{
        months:
          "tw-figr-flex tw-figr-flex-col sm:tw-figr-flex-row tw-figr-space-y-4 sm:tw-figr-space-x-4 sm:tw-figr-space-y-0",
        month: "tw-figr-space-y-4",
        caption:
          "tw-figr-flex tw-figr-justify-center tw-figr-pt-1 tw-figr-relative tw-figr-items-center tw-figr-text-base-black",
        caption_label: "tw-figr-text-desktop-caption-accent",
        nav: "tw-figr-space-x-1 tw-figr-flex tw-figr-items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline", size: "none" }),
          "tw-figr-h-7 tw-figr-w-7 tw-figr-bg-transparent tw-figr-p-0 tw-figr-opacity-50 hover:tw-figr-opacity-100"
        ),
        nav_button_previous: "tw-figr-absolute tw-figr-left-1",
        nav_button_next: "tw-figr-absolute tw-figr-right-1",
        table: "tw-figr-w-full tw-figr-border-collapse tw-figr-space-y-1",
        head_row: "tw-figr-flex",
        head_cell:
          "tw-figr-text-neutral-100 tw-figr-rounded-m tw-figr-w-8 tw-figr-font-normal tw-figr-text-[0.8rem]",
        row: "tw-figr-flex tw-figr-w-full tw-figr-mt-2",
        cell: cn(
          "tw-figr-relative tw-figr-p-0 tw-figr-text-desktop-caption-regular focus-within:tw-figr-relative focus-within:tw-figr-z-20 [&:has([aria-selected])]:tw-figr-bg-neutral-200 [&:has([aria-selected].day-outside)]:tw-figr-bg-neutral-500 [&:has([aria-selected].day-range-end)]:tw-figr-rounded-r-m tw-figr-text-center first:[&:has([aria-selected])]:tw-figr-rounded-l-m last:[&:has([aria-selected])]:tw-figr-rounded-r-m",
          props.mode === "range"
            ? "[&:has(>.day-range-end)]:tw-figr-rounded-r-m [&:has(>.day-range-start)]:tw-figr-rounded-l-m first:[&:has([aria-selected])]:tw-figr-rounded-l-m last:[&:has([aria-selected])]:tw-figr-rounded-r-m"
            : "[&:has([aria-selected])]:tw-figr-rounded-m"
        ),
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "tw-figr-h-8 tw-figr-w-8 tw-figr-p-0 tw-figr-font-normal aria-selected:tw-figr-opacity-100"
        ),
        day_range_start: "day-range-start",
        day_range_end: "day-range-end",
        day_selected:
          "tw-figr-bg-primary tw-figr-text-base-white hover:tw-figr-text-base-white hover:tw-figr-bg-primary-600 focus:tw-figr-bg-primary focus:tw-figr-text-base-white",
        day_today: "tw-figr-bg-neutral-200 tw-figr-text-base-black",
        day_outside:
          "day-outside tw-figr-text-base-black tw-figr-opacity-50  aria-selected:tw-figr-bg-neutral-500 aria-selected:tw-figr-text-base-black aria-selected:tw-figr-opacity-30",
        day_disabled: "tw-figr-text-base-black tw-figr-opacity-50",
        day_range_middle:
          "aria-selected:tw-figr-bg-neutral-200 aria-selected:tw-figr-text-base-black",
        day_hidden: "tw-figr-invisible",
        ...classNames
      }}
      components={{
        IconLeft: ({ ...props }) => (
          <ChevronLeft className="tw-figr-h-4 tw-figr-w-4" />
        ),
        IconRight: ({ ...props }) => (
          <ChevronRight className="tw-figr-h-4 tw-figr-w-4" />
        )
      }}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";

export { Calendar };