import { DatePicker as AriaDatePicker, Button, Dialog, Group, OverlayArrow, Popover } from 'react-aria-components';

import dayjs from 'dayjs';
import { tv } from 'tailwind-variants';

import { Calendar } from '../calendar';
import { calendarDateToDate, dateToCalendarDate } from '../calendar/utils';
import { CalendarIcon } from '../icons';

const trigger = tv({
  base: 'flex h-9 w-[156px] cursor-pointer items-center border border-kc-gray-be bg-white text-left outline-none transition',
  variants: {
    isHovered: {
      true: 'border-kc-black-34',
    },
    isFocused: {
      true: 'border-kc-black-34',
    },
    isDisabled: {
      true: 'cursor-default border-kc-gray-99 bg-kc-gray-eb',
    },
    isFocusVisible: {
      true: 'ring-2 ring-offset-2 ring-primary',
    },
  },
});

export type DatePickerProps = {
  value: Date | null;
  onChange: (date: Date | null) => void;
  maxValue?: Date | null;
  minValue?: Date | null;
  isDisabled?: boolean;
  className?: string;
  name?: string;
};

export function DatePicker({ value, onChange, maxValue, minValue, isDisabled, className, name }: DatePickerProps) {
  return (
    <AriaDatePicker
      aria-label="날짜 선택"
      value={dateToCalendarDate(value)}
      onChange={(val) => onChange(calendarDateToDate(val))}
      maxValue={maxValue !== undefined ? dateToCalendarDate(maxValue) : undefined}
      minValue={minValue !== undefined ? dateToCalendarDate(minValue) : undefined}
      isDisabled={isDisabled}
      granularity="day"
      firstDayOfWeek="sun"
      className={className}
      name={name}
    >
      <Group>
        <Button className={(renderProps) => trigger(renderProps)}>
          <span className={`flex-1 px-3 text-sm ${value ? 'text-kc-black-34' : 'text-kc-gray-99'}`}>
            {value ? dayjs(value).format('YYYY.MM.DD') : 'YYYY.MM.DD'}
          </span>
          <span className="flex h-full w-8 shrink-0 items-center justify-center text-kc-gray-99">
            <CalendarIcon className="h-4 w-4" />
          </span>
        </Button>
      </Group>
      <Popover className="bg-white border border-kc-gray-be p-3 px-6 pb-6 drop-shadow-modal outline-none" offset={12}>
        <OverlayArrow className="group/arrow">
          <svg
            width="12"
            height="8"
            viewBox="0 0 12 8"
            className="block fill-white stroke-kc-gray-be group-data-[placement=bottom]/arrow:rotate-180"
          >
            <path d="M0 0 L6 8 L12 0" />
          </svg>
        </OverlayArrow>
        <Dialog className="outline-none">
          <Calendar />
        </Dialog>
      </Popover>
    </AriaDatePicker>
  );
}