import * as React from 'react';
import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
import { DayPicker, type ChevronProps, type DayPickerProps } from 'react-day-picker';
import { cn } from '../../lib/utils';

export function Calendar(props: DayPickerProps) {
  const { className, classNames, showOutsideDays = true, ...rest } = props;
  return (
    <DayPicker
      className={cn('shCalendar', className)}
      classNames={{
        root: 'shCalendarRoot',
        months: 'shCalendarMonths',
        month: 'shCalendarMonth',
        month_caption: 'shCalendarCaption',
        caption_label: 'shCalendarCaptionLabel',
        nav: 'shCalendarNav',
        button_previous: 'shCalendarNavButton',
        button_next: 'shCalendarNavButton',
        chevron: 'shCalendarChevron',
        month_grid: 'shCalendarGrid',
        weekdays: 'shCalendarWeekdays',
        weekday: 'shCalendarWeekday',
        weeks: 'shCalendarWeeks',
        week: 'shCalendarWeek',
        day: 'shCalendarDay',
        day_button: 'shCalendarDayButton',
        outside: 'shCalendarDayOutside',
        disabled: 'shCalendarDayDisabled',
        selected: 'shCalendarDaySelected',
        today: 'shCalendarDayToday',
        hidden: 'shCalendarDayHidden',
        ...classNames,
      }}
      components={{
        Chevron: CalendarChevron,
        ...props.components,
      }}
      showOutsideDays={showOutsideDays}
      {...rest}
    />
  );
}

function CalendarChevron(props: ChevronProps) {
  const Icon = props.orientation === 'left'
    ? ChevronLeft
    : props.orientation === 'right'
      ? ChevronRight
      : props.orientation === 'up'
        ? ChevronUp
        : ChevronDown;
  return <Icon className={cn('shCalendarChevronIcon', props.className)} size={props.size ?? 16} />;
}
