import { jsx as e, jsxs as f } from "react/jsx-runtime";
import { createSlotRecipeContext as k } from "@chakra-ui/react";
import { Close as y, CalendarMonth as C } from "@commercetools/nimbus-icons";
import { b as $, c as M } from "./DatePicker-CL72jbDo.es.js";
import { $ as H, k as D } from "./Dialog-B0BQfdQa.es.js";
import { $ as E } from "./Group-BQc9LuMT.es.js";
import { useSlotRecipe as R } from "@chakra-ui/react/styled-system";
import { h as z } from "./index-C2qW4ynb.es.js";
import { e as V } from "./extract-style-props-BdibuNZ7.es.js";
import { useContext as I, useRef as g, useEffect as w } from "react";
import { $ as S } from "./Button-BjcDZ5eb.es.js";
import { c as B, e as F } from "./utils-B6pV5ewr.es.js";
import { o as Z } from "./DateField-DCWy1Ysp.es.js";
import { n as T, u as x } from "./normalize-messages-D5T4I93D.es.js";
import { D as _ } from "./date-input-Cd9q4qBj.es.js";
import { C as j } from "./calendar-lSoXK-yt.es.js";
import { T as L } from "./time-input-CCuIFoY2.es.js";
import { Flex as A } from "@chakra-ui/react/flex";
import { T as G } from "./text-CIb_VDvO.es.js";
import { B as O } from "./box-DuBoAZvq.es.js";
import { I as P } from "./icon-button-CosIm3oY.es.js";
const { withProvider: q, withContext: h } = /* @__PURE__ */ k({
  key: "datePicker"
}), N = /* @__PURE__ */ q("div", "root"), W = /* @__PURE__ */ h("div", "group"), J = /* @__PURE__ */ h("div", "popover"), K = /* @__PURE__ */ h("div", "calendar"), Q = {
  "Time.enterTime": "Enter time",
  "Time.enterTimeHour": "Enter time (hour)",
  "Time.enterTimeHourMinute": "Enter time (hour and minute)",
  "Time.enterTimeHourMinuteSecond": "Enter time (hour, minute, and second)",
  "Time.startTime": "Start time",
  clearInput: "Clear input value"
}, U = {
  "Time.enterTime": "Zeit eingeben",
  "Time.enterTimeHour": "Zeit eingeben (Stunde)",
  "Time.enterTimeHourMinute": "Zeit eingeben (Stunde und Minute)",
  "Time.enterTimeHourMinuteSecond": "Zeit eingeben (Stunde, Minute und Sekunde)",
  "Time.startTime": "Startzeit",
  clearInput: "Eingabewert löschen"
}, X = {
  "Time.enterTime": "Indicar tiempo",
  "Time.enterTimeHour": "Indicar tiempo (hora)",
  "Time.enterTimeHourMinute": "Indicar tiempo (hora y minuto)",
  "Time.enterTimeHourMinuteSecond": "Indicar tiempo (hora, minuto y segundo)",
  "Time.startTime": "Iniciar tiempo",
  clearInput: "Eliminar valor de entrada"
}, Y = {
  "Time.enterTime": "Saisir l'heure",
  "Time.enterTimeHour": "Saisir l'heure (heure)",
  "Time.enterTimeHourMinute": "Saisir l'heure (heure et minute)",
  "Time.enterTimeHourMinuteSecond": "Saisir l'heure (heure, minute et seconde)",
  "Time.startTime": "Heure de début",
  clearInput: "Effacer la valeur saisie"
}, ee = {
  "Time.enterTime": "Inserir hora",
  "Time.enterTimeHour": "Inserir hora (hora)",
  "Time.enterTimeHourMinute": "Inserir hora (hora e minutos)",
  "Time.enterTimeHourMinuteSecond": "Inserir hora (hora, minutos e segundos)",
  "Time.startTime": "Hora de início",
  clearInput: "Limpar valores inseridos"
}, v = {
  en: /* @__PURE__ */ T(Q),
  de: /* @__PURE__ */ T(U),
  es: /* @__PURE__ */ T(X),
  "fr-FR": /* @__PURE__ */ T(Y),
  "pt-BR": /* @__PURE__ */ T(ee)
}, te = ({
  children: n
}) => {
  const t = x(v), o = B(S) || {}, a = I($), s = a?.dateValue === null, { timeValue: r, setTimeValue: l, granularity: i } = a, m = o?.isDisabled, c = () => {
    switch (i) {
      case "hour":
        return t.format("Time.enterTimeHour");
      case "minute":
        return t.format("Time.enterTimeHourMinute");
      case "second":
        return t.format("Time.enterTimeHourMinuteSecond");
      default:
        return t.format("Time.enterTime");
    }
  }, d = {
    /** toggles the calendar popover */
    calendarToggle: {
      ...o,
      onPress: (u) => {
        const b = document?.activeElement;
        b && b.blur(), o.onPress?.(u);
      }
    },
    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */
    clear: {
      onPress: () => a?.setValue(null),
      "aria-label": t.format("clearInput"),
      isDisabled: m,
      // Hide the button when there's no value
      style: s ? { display: "none" } : void 0,
      "aria-hidden": s ? !0 : void 0
    }
  }, p = {
    timeInput: {
      value: r,
      onChange: (u) => {
        u !== null && l(u);
      },
      granularity: i === "day" ? void 0 : i,
      "aria-label": c()
    }
  };
  return /* @__PURE__ */ e(
    F,
    {
      values: [
        [
          S,
          {
            slots: d
          }
        ],
        [Z, { slots: p }]
      ],
      children: n
    }
  );
}, re = ({
  hideTimeZone: n,
  hourCycle: t
}) => {
  const o = x(v), a = I($), { granularity: s, dateValue: r } = a, l = g(null), i = g(r);
  return s === "day" ? null : (w(() => {
    let m;
    if (r && i.current?.compare(r) !== 0) {
      const c = l.current, d = document.activeElement;
      c?.contains(d) && d?.getAttribute("role") === "spinbutton" || (m = setTimeout(() => {
        c && c.querySelector(
          '[role="spinbutton"]'
        )?.focus();
      }, 50));
    }
    return i.current = r, () => {
      m && clearTimeout(m);
    };
  }, [r]), /* @__PURE__ */ f(
    A,
    {
      ref: l,
      borderTop: "solid-25",
      borderColor: "neutral.3",
      py: "300",
      px: "400",
      alignItems: "center",
      justifyContent: "center",
      gap: "200",
      children: [
        /* @__PURE__ */ e(G, { textStyle: "xs", fontWeight: "500", color: "neutral.12", children: o.format("Time.startTime") }),
        /* @__PURE__ */ e(
          L,
          {
            slot: "timeInput",
            variant: "ghost",
            size: "sm",
            hideTimeZone: n,
            hourCycle: t
          }
        )
      ]
    }
  ));
}, ie = (n) => {
  const {
    size: t = "md",
    variant: o,
    granularity: a = "day",
    hideTimeZone: s,
    hourCycle: r
  } = n, l = R({ recipe: z }), [i, m] = l.splitVariantProps(n), [c, d] = V(m), p = t === "md" ? "xs" : "2xs", u = a === "day" ? n.shouldCloseOnSelect : !1;
  return /* @__PURE__ */ e(N, { ...i, ...c, asChild: !0, children: /* @__PURE__ */ e(
    M,
    {
      ...d,
      shouldCloseOnSelect: u,
      children: /* @__PURE__ */ f(te, { children: [
        /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
          _,
          {
            size: t,
            variant: o,
            width: "full",
            hideTimeZone: s,
            hourCycle: r,
            trailingElement: /* @__PURE__ */ f(O, { children: [
              /* @__PURE__ */ e(
                P,
                {
                  variant: "ghost",
                  size: p,
                  slot: "clear",
                  children: /* @__PURE__ */ e(y, {})
                }
              ),
              /* @__PURE__ */ e(
                P,
                {
                  variant: "ghost",
                  size: p,
                  slot: "calendarToggle",
                  children: /* @__PURE__ */ e(C, {})
                }
              )
            ] })
          }
        ) }) }),
        /* @__PURE__ */ e(J, { asChild: !0, children: /* @__PURE__ */ e(H, { placement: "bottom end", children: /* @__PURE__ */ f(D, { children: [
          /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(j, {}) }),
          /* @__PURE__ */ e(
            re,
            {
              hideTimeZone: s,
              hourCycle: r
            }
          )
        ] }) }) })
      ] })
    }
  ) });
};
ie.displayName = "DatePicker";
export {
  ie as D
};
//# sourceMappingURL=date-picker-B8VVNXU3.es.js.map
