import { jsx as t, jsxs as f } from "react/jsx-runtime";
/* empty css              */
import { shift as G, offset as J } from "@floating-ui/dom";
import { IconCaretLeftDouble as Q, IconCaretLeft as U, IconCaretRight as X, IconCaretRightDouble as Z } from "@frontify/fondue-icons";
import { format as _, getYear as $ } from "date-fns";
import { forwardRef as ee, useRef as te, useState as ae } from "react";
import C from "react-datepicker";
import { createPortal as re } from "react-dom";
import { Button as o } from "../Button/Button.es.js";
import { ButtonEmphasis as s, ButtonSize as i, ButtonStyle as l } from "../Button/ButtonTypes.es.js";
import { merge as oe } from "../../utilities/merge.es.js";
import { Validation as se } from "../../utilities/validation.es.js";
import { DatePickerTrigger as ie } from "./DatePickerTrigger.es.js";
const le = C.default ?? C, ne = (n, a) => n === "single" ? a < /* @__PURE__ */ new Date() ? "past-date" : "future-date" : "range-day", ce = ee(
  ({
    placeHolder: n = "Select a date",
    isClearable: a,
    shouldCloseOnSelect: h,
    onChange: u,
    onOpen: c,
    onClose: d,
    onBlur: g,
    onKeyDown: M,
    dateFormat: x = "MMM dd, yyyy",
    value: z,
    startDate: N,
    endDate: P,
    minDate: R,
    maxDate: b,
    validation: I = se.Default,
    customTrigger: S,
    customHeader: v,
    children: B,
    fixedHeight: j = !0,
    hasPopperArrow: W = !0,
    preventOpenOnFocus: q = !1,
    inline: w = !1,
    filterDate: F = () => !0,
    variant: k = "single",
    hugWidth: p = !0,
    "data-test-id": H = "date-picker",
    triggerAriaLabel: L = "Open or close the date picker"
  }, A) => {
    const y = te(null), [m, D] = ae(!1), E = () => {
      D(!0), c == null || c(), queueMicrotask(K);
    }, K = () => {
      var e, r;
      (r = (e = y.current) == null ? void 0 : e.querySelector("button")) == null || r.focus();
    }, O = () => {
      D(!1), d == null || d();
    };
    return /* @__PURE__ */ t("div", { "data-test-id": H, className: p ? "tw-w-auto" : "tw-w-full", children: /* @__PURE__ */ t(
      le,
      {
        wrapperClassName: p ? "tw-w-auto" : "tw-w-full",
        calendarClassName: oe([
          "react-datepicker-wrap tw-pointer-events-auto",
          w && "react-datepicker-inline"
        ]),
        inline: w,
        selected: z,
        startDate: N,
        endDate: P,
        minDate: R,
        maxDate: b,
        calendarStartDay: 1,
        onChange: u,
        onKeyDown: m ? void 0 : M,
        onBlur: g,
        selectsRange: k === "range",
        showPopperArrow: W,
        preventOpenOnFocus: q,
        filterDate: F,
        fixedHeight: j,
        customInput: S ?? /* @__PURE__ */ t(
          ie,
          {
            isCalendarOpen: m,
            isClearable: a,
            placeHolder: n,
            validation: I,
            onDateChanged: u,
            hugWidth: p,
            "aria-haspopup": "dialog",
            "aria-expanded": m,
            "aria-label": L
          }
        ),
        ref: A,
        formatWeekDay: (e) => e.slice(0, 1),
        isClearable: a,
        dateFormat: x,
        onCalendarClose: O,
        onCalendarOpen: E,
        shouldCloseOnSelect: h,
        dayClassName: (e) => ne(k, e),
        popperProps: {
          strategy: "fixed"
        },
        popperContainer: ({ children: e }) => re(e, document.body),
        popperModifiers: [G({ padding: 8 }), J(8)],
        renderCustomHeader: ({ date: e, decreaseMonth: r, increaseMonth: T, increaseYear: V, decreaseYear: Y }) => /* @__PURE__ */ f(
          "div",
          {
            className: "tw-flex tw-flex-col tw-gap-3",
            ref: y,
            "data-test-id": "date-picker-header",
            children: [
              v,
              /* @__PURE__ */ f("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0", children: [
                /* @__PURE__ */ t(
                  o,
                  {
                    style: l.Default,
                    size: i.Medium,
                    onClick: Y,
                    emphasis: s.Weak,
                    icon: /* @__PURE__ */ t(Q, { size: 20 })
                  }
                ),
                /* @__PURE__ */ t(
                  o,
                  {
                    style: l.Default,
                    size: i.Medium,
                    onClick: r,
                    emphasis: s.Weak,
                    icon: /* @__PURE__ */ t(U, { size: 20 })
                  }
                ),
                /* @__PURE__ */ f("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center", children: [
                  _(e, "MMMM"),
                  " ",
                  $(e)
                ] }),
                /* @__PURE__ */ t(
                  o,
                  {
                    style: l.Default,
                    size: i.Medium,
                    onClick: T,
                    emphasis: s.Weak,
                    icon: /* @__PURE__ */ t(X, { size: 20 })
                  }
                ),
                /* @__PURE__ */ t(
                  o,
                  {
                    style: l.Default,
                    size: i.Medium,
                    onClick: V,
                    emphasis: s.Weak,
                    icon: /* @__PURE__ */ t(Z, { size: 20 })
                  }
                )
              ] })
            ]
          }
        ),
        children: B
      }
    ) });
  }
);
ce.displayName = "FondueDatePicker";
export {
  ce as DatePicker
};
//# sourceMappingURL=DatePicker.es.js.map
