'use strict';
import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { DayPicker } from 'react-day-picker';
import { useEffect } from 'react';
import { iconNames, Icon, iconSizes } from '../icon/Icon.js';
import { Button } from '../button/Button.js';
import { calendarCaptionLayout } from './calendar-constants.js';
import { isFocusedDay, isDayRangeMiddle, isDayRangeEnd, isDayRangeStart, isSingleSelectedDay } from './Calendar.funcs.js';
import { useEmptyRef } from '../../../fd-toolbox/hooks/use-empty-ref.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const calendarChevronBaseClass = "flex items-center justify-center size-4.5";
const calendarChevronCompactSizeClass = "size-4.5";
const hoverAccentClass = "hover:bg-accent hover:text-accent-foreground";
const calendarNavButtonBaseClass = "inline-flex size-[--cell-size] items-center cursor-pointer justify-center rounded-md transition-colors aria-disabled:pointer-events-none aria-disabled:opacity-50";
const calendarChevrons = {
  left: {
    name: iconNames.chevronLeft,
    className: calendarChevronBaseClass
  },
  right: {
    name: iconNames.chevronRight,
    className: calendarChevronBaseClass
  },
  up: {
    name: iconNames.chevronUp,
    className: calendarChevronCompactSizeClass
  },
  down: {
    name: iconNames.chevronDown,
    className: calendarChevronCompactSizeClass
  }
};
const calendarNavButtonClass = cn(calendarNavButtonBaseClass, hoverAccentClass);
function Calendar({
  className,
  classNames,
  showOutsideDays,
  captionLayout,
  formatters,
  components
}) {
  const isLabelCaptionLayout = captionLayout === calendarCaptionLayout.label;
  return /* @__PURE__ */jsx(DayPicker, {
    showOutsideDays: showOutsideDays ?? true,
    className: cn("w-full", className),
    captionLayout: captionLayout ?? calendarCaptionLayout.label,
    formatters: {
      formatMonthDropdown: /* @__PURE__ */__name(date => date.toLocaleString("default", {
        month: "short"
      }), "formatMonthDropdown"),
      ...formatters
    },
    classNames: {
      months: "relative w-full flex flex-col sm:flex-row",
      month: "space-y-4 px-4 w-full",
      month_caption: "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
      month_grid: "w-full",
      caption_label: cn(!isLabelCaptionLayout ? "hidden" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none"),
      nav: "absolute py-1 inset-x-0 top-0 flex w-full items-center justify-between gap-1",
      button_previous: calendarNavButtonClass,
      button_next: calendarNavButtonClass,
      dropdowns: "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
      dropdown_root: "border-input text-muted-foreground relative rounded-md border",
      dropdown: "bg-popover absolute inset-0 opacity-0",
      dropdown_icon: "text-muted-foreground",
      table: "w-full border-collapse table-fixed",
      weekdays: "flex w-full",
      weekday: "text-muted-foreground flex-1 select-none rounded-md text-sm font-normal",
      week: "mt-2 flex w-full",
      week_number_header: "w-[--cell-size] select-none",
      week_number: "text-muted-foreground select-none text-sm",
      day: "relative text-muted-foreground aspect-square size-full select-none p-0 text-center",
      range_start: "range_start",
      range_end: "range_end",
      today: "bg-accent text-accent-foreground rounded-md",
      outside: "outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
      disabled: "text-muted-foreground opacity-50",
      range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
      hidden: "invisible",
      ...classNames
    },
    components: {
      Chevron: CalendarChevron,
      DayButton: CalendarDayButton,
      Select: CalendarSelect,
      ...components
    }
  });
}
__name(Calendar, "Calendar");
function CalendarChevron({
  orientation,
  className
}) {
  if (!orientation || !(orientation in calendarChevrons)) {
    return /* @__PURE__ */jsx("span", {
      className: "hidden"
    });
  }
  const chevron = calendarChevrons[orientation];
  return /* @__PURE__ */jsx(Icon, {
    name: chevron.name,
    color: "text-fd-accent",
    className: cn(chevron.className, className)
  });
}
__name(CalendarChevron, "CalendarChevron");
function CalendarSelect({
  children
}) {
  return /* @__PURE__ */jsxs("div", {
    className: "relative",
    children: [/* @__PURE__ */jsx("select", {
      className: cn("border-input h-[--cell-size] cursor-pointer appearance-none bg-transparent", "gap-1 rounded-md border pr-6 pl-2", "transition-all outline-none focus:ring-0", hoverAccentClass),
      children
    }), /* @__PURE__ */jsx(Icon, {
      name: iconNames.chevronDown,
      size: iconSizes.extraSmall,
      className: "text-fd-accent pointer-events-none absolute top-1/2 right-2 -translate-y-1/2"
    })]
  });
}
__name(CalendarSelect, "CalendarSelect");
function CalendarDayButton({
  className,
  day,
  modifiers
}) {
  const calendarDayButtonRef = useEmptyRef();
  const dayIsFocused = isFocusedDay(modifiers);
  useEffect(() => {
    if (dayIsFocused) calendarDayButtonRef.current?.focus();
  }, [dayIsFocused, calendarDayButtonRef]);
  return /* @__PURE__ */jsx(Button, {
    ref: calendarDayButtonRef,
    variant: "ghost",
    size: "icon",
    "data-day": day.date.toLocaleDateString(),
    "data-selected-single": isSingleSelectedDay(modifiers),
    "data-range-start": isDayRangeStart(modifiers),
    "data-range-end": isDayRangeEnd(modifiers),
    "data-range-middle": isDayRangeMiddle(modifiers),
    className: cn("flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground", className)
  });
}
__name(CalendarDayButton, "CalendarDayButton");

export { Calendar };
