import {
  Popover
} from "./chunk-5AVBYDPB.js";
import {
  Heading
} from "./chunk-34OQDUQR.js";
import {
  IconButton
} from "./chunk-O3DNDMV3.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  Button
} from "./chunk-AFPH32MF.js";
import {
  ChevronLeftIcon,
  ChevronRightIcon
} from "./chunk-V5XKNSCK.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-2NMEKWO5.js";

// src/molecules/date-picker/index.tsx
import { forwardRef, useMemo, useState } from "react";
import ReactDatePicker from "react-datepicker";
import { ko } from "date-fns/locale";
import { jsx, jsxs } from "react/jsx-runtime";
var DatePicker = forwardRef(
  (props, ref) => {
    const _a = props, { fullWidth } = _a, rest = __objRest(_a, ["fullWidth"]);
    const fullWidthClassName = fullWidth ? "full-width" : "";
    const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);
    const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);
    const renderCustomHeader = useMemo(() => {
      const getYears = () => {
        const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
        return Array.from(
          { length: currentYear + 5 - 1920 },
          (_, index) => 1920 + index
        ).filter((year) => {
          if (props.minDate && year < props.minDate.getFullYear()) {
            return false;
          }
          if (props.maxDate && year > props.maxDate.getFullYear()) {
            return false;
          }
          return true;
        });
      };
      return getRenderCustomHeader(__spreadProps(__spreadValues({}, props), {
        years: getYears(),
        isYearDropdownOpen,
        setIsYearDropdownOpen,
        isMonthDropdownOpen,
        setIsMonthDropdownOpen
      }));
    }, [isMonthDropdownOpen, isYearDropdownOpen, props]);
    return /* @__PURE__ */ jsx(Flex, { p: "0", width: "100%", children: /* @__PURE__ */ jsx(
      ReactDatePicker,
      __spreadProps(__spreadValues({
        dateFormat: "yyyy/MM/dd h:mm aa",
        locale: ko,
        nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
        placeholderText: "YYYY/MM/DD hh:mm AM/PM",
        popperProps: { strategy: "fixed" },
        previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
        ref,
        renderCustomHeader,
        showPopperArrow: false,
        timeFormat: "h:mm aa",
        timeIntervals: 10,
        timeCaption: "\uC2DC\uAC04"
      }, rest), {
        calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
        wrapperClassName: `tipp_datePicker ${fullWidthClassName} ${rest.wrapperClassName || ""}`
      })
    ) });
  }
);
DatePicker.displayName = "DatePicker";
function DropdownSelector({
  isOpen,
  onOpenChange,
  onSelect,
  options,
  selectedValue,
  suffix
}) {
  return /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange, open: isOpen, children: [
    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: /* @__PURE__ */ jsxs(Heading, { variant: "heading4", weight: "regular", children: [
      selectedValue,
      suffix
    ] }) }) }),
    /* @__PURE__ */ jsx(Popover.Content, { side: "bottom", children: /* @__PURE__ */ jsx(
      Box,
      {
        maxHeight: "200px",
        overflowY: "auto",
        style: { scrollbarWidth: "none" },
        onClick: (e) => e.stopPropagation(),
        children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "1", children: options.map((item) => /* @__PURE__ */ jsxs(
          Button,
          {
            color: "gray",
            onClick: (e) => {
              e.stopPropagation();
              e.preventDefault();
              onSelect(item);
            },
            variant: "ghost",
            children: [
              item,
              suffix
            ]
          },
          item
        )) })
      }
    ) })
  ] });
}
var getRenderCustomHeader = (props) => {
  const renderer = (renderCustomHeaderProps) => {
    const {
      date,
      decreaseMonth,
      increaseMonth,
      prevMonthButtonDisabled,
      nextMonthButtonDisabled,
      changeYear,
      changeMonth
    } = renderCustomHeaderProps;
    const {
      years,
      isYearDropdownOpen,
      setIsYearDropdownOpen,
      isMonthDropdownOpen,
      setIsMonthDropdownOpen
    } = props;
    const year = date ? new Date(date).getFullYear() : "-";
    const month = date ? new Date(date).getMonth() + 1 : "-";
    return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
      /* @__PURE__ */ jsx(
        IconButton,
        {
          disabled: prevMonthButtonDisabled,
          onClick: decreaseMonth,
          type: "button",
          variant: "ghost",
          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
        }
      ),
      /* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
        /* @__PURE__ */ jsx(
          DropdownSelector,
          {
            isOpen: isYearDropdownOpen,
            onOpenChange: setIsYearDropdownOpen,
            onSelect: (value) => {
              changeYear(value);
              setIsYearDropdownOpen(false);
            },
            options: years,
            selectedValue: year,
            suffix: "\uB144"
          }
        ),
        /* @__PURE__ */ jsx(
          DropdownSelector,
          {
            isOpen: isMonthDropdownOpen,
            onOpenChange: setIsMonthDropdownOpen,
            onSelect: (value) => {
              changeMonth(value - 1);
              setIsMonthDropdownOpen(false);
            },
            options: Array.from({ length: 12 }, (_, index) => index + 1),
            selectedValue: month,
            suffix: "\uC6D4"
          }
        )
      ] }),
      /* @__PURE__ */ jsx(
        IconButton,
        {
          disabled: nextMonthButtonDisabled,
          onClick: increaseMonth,
          type: "button",
          variant: "ghost",
          children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
        }
      )
    ] });
  };
  return renderer;
};

export {
  DatePicker
};
//# sourceMappingURL=chunk-STBA27UQ.js.map