"use client";
import * as React from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
import { DayPicker } from "react-day-picker";
import { cn } from "../../../lib/utils";
import { cva, type VariantProps } from "class-variance-authority";

const calendarVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "text-secondary-foreground hover:bg-primary/20 active:scale-95 transition",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground active:scale-95 transition",
        custom:
        "hover:bg-cyan-500"
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export type CalendarProps = React.ComponentProps<typeof DayPicker> & VariantProps<typeof calendarVariants> & {
  enabledDates?: Date[];
  enabledDatesStyles?: string;

};

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  enabledDates = [],
  enabledDatesStyles = '',
  variant,
  ...props
}: CalendarProps) {
  const isDateEnabled = (date: Date) => {
    return (
      enabledDates.length === 0 ||
      enabledDates.some(
        (enabledDate) => enabledDate.toDateString() === date.toDateString()
      )
    );
  };

  
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      disabled={(date) => !isDateEnabled(date)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium ",
        nav: "space-x-1 flex items-center ",
        nav_button: cn(
          calendarVariants({ variant }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: cn(
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20  [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
          props.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([aria-selected])]:rounded-md"
        ),
        day: cn(
          calendarVariants({ variant }),
          `h-8 w-8 p-0 font-normal aria-selected:opacity-100 ${
            enabledDates.length === 0 ? "" : enabledDatesStyles || 'border border-primary'
          }`
        ),
        day_range_start: "day-range-start",
        day_range_end: "day-range-end",
        day_selected: cn(
          "bg-primary/80 text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground focus:bg-primary/80 focus:text-primary-foreground",calendarVariants({variant})),
        day_today: "text-accent-foreground border border-blue-400",
        day_outside:
          "day-outside text-muted-foreground opacity-30 !aria-selected:bg-primary/80 aria-selected:text-primary-foreground aria-selected:opacity",
        day_disabled: `text-muted-secondary ${
          enabledDates.length === 0 ? "" : "!bg-white border border-white"
        }`,
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
        IconRight: ({ ...props }) => 
        <ChevronRightIcon className="h-4 w-4" />
      }}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";

export { Calendar , calendarVariants};
