import { jsxs as f, jsx as n } from "react/jsx-runtime";
import { createSlotRecipeContext as E } from "@chakra-ui/react";
import { Close as L, CalendarMonth as V } from "@commercetools/nimbus-icons";
import { $ as D, a as F } from "./DatePicker-Q7fh8tyb.es.js";
import { $ as w, k as _ } from "./Dialog-7Yf08giu.es.js";
import { $ as A } from "./Group-GVlDKuLP.es.js";
import { useSlotRecipe as B } from "@chakra-ui/react/styled-system";
import { g as O } from "./index-N3Xxo-X9.es.js";
import { e as W } from "./extract-style-props-CMyV-es-.es.js";
import { useContext as k, useRef as P, useEffect as j } from "react";
import { n as T, u as R } from "./normalize-messages-BN9BAFXe.es.js";
import { F as $ } from "./flex-BqxAMF-7.es.js";
import { T as M } from "./text-iTgAZrNO.es.js";
import { T as x } from "./time-input-DQLuVFMb.es.js";
import { $ as y } from "./Button-C9AKe3Kt.es.js";
import { c as G, e as K } from "./utils-CrjF8U_E.es.js";
import { o as q } from "./DateField-Q8JgjnI7.es.js";
import { R as N } from "./range-calendar-BkRTn3qu.es.js";
import { D as z } from "./date-input-BVYLw6C7.es.js";
import { I } from "./icon-button-DQaOMIAe.es.js";
const { withProvider: J, withContext: H } = /* @__PURE__ */ E({
  key: "nimbusDateRangePicker"
}), Q = /* @__PURE__ */ J("div", "root"), U = /* @__PURE__ */ H("div", "group"), X = /* @__PURE__ */ H("div", "trigger"), Y = /* @__PURE__ */ H("div", "popover"), Z = /* @__PURE__ */ H("div", "calendar"), ee = {
  clearInput: "Clear input value",
  clearSelection: "Clear date range",
  endTime: "End time",
  endTimeHour: "End time (hour)",
  endTimeHourMinute: "End time (hour and minute)",
  endTimeHourMinuteSecond: "End time (hour, minute, and second)",
  endTimeLabel: "End time",
  openCalendar: "Open calendar",
  startTime: "Start time",
  startTimeHour: "Start time (hour)",
  startTimeHourMinute: "Start time (hour and minute)",
  startTimeHourMinuteSecond: "Start time (hour, minute, and second)",
  startTimeLabel: "Start time"
}, te = {
  clearInput: "Eingabewert löschen",
  clearSelection: "Datumsbereich löschen",
  endTime: "Endzeit",
  endTimeHour: "Endzeit (Stunde)",
  endTimeHourMinute: "Endzeit (Stunde und Minute)",
  endTimeHourMinuteSecond: "Endzeit (Stunde, Minute und Sekunde)",
  endTimeLabel: "Endzeit",
  openCalendar: "Kalender öffnen",
  startTime: "Startzeit",
  startTimeHour: "Startzeit (Stunde)",
  startTimeHourMinute: "Startzeit (Stunde und Minute)",
  startTimeHourMinuteSecond: "Startzeit (Stunde, Minute und Sekunde)",
  startTimeLabel: "Startzeit"
}, ne = {
  clearInput: "Eliminar valor de entrada",
  clearSelection: "Borrar rango de fechas",
  endTime: "Finalizar tiempo",
  endTimeHour: "Finalizar tiempo (hora)",
  endTimeHourMinute: "Finalizar tiempo (hora y minuto)",
  endTimeHourMinuteSecond: "Finalizar tiempo (hora, minuto, segundo)",
  endTimeLabel: "Finalizar tiempo",
  openCalendar: "Abrir calendario",
  startTime: "Iniciar tiempo",
  startTimeHour: "Iniciar tiempo (hora)",
  startTimeHourMinute: "Iniciar tiempo (hora y minuto)",
  startTimeHourMinuteSecond: "Iniciar tiempo (hora, minuto y segundo)",
  startTimeLabel: "Iniciar tiempo"
}, re = {
  clearInput: "Effacer la valeur saisie",
  clearSelection: "Effacer la plage de dates",
  endTime: "Heure de fin",
  endTimeHour: "Heure de fin (heure)",
  endTimeHourMinute: "Heure de fin (heure et minute)",
  endTimeHourMinuteSecond: " Heure de fin (heure, minute et seconde)",
  endTimeLabel: "Heure de fin",
  openCalendar: "Ouvrir le calendrier",
  startTime: "Heure de début",
  startTimeHour: "Heure de début (heure)",
  startTimeHourMinute: "Heure de début  (heure et minute)",
  startTimeHourMinuteSecond: "Heure de début (heure, minute et seconde)",
  startTimeLabel: "Heure de début"
}, ae = {
  clearInput: "Limpar valores inseridos",
  clearSelection: "Limpar intervalo de datas",
  endTime: "Hora de término",
  endTimeHour: "Hora de término (hora)",
  endTimeHourMinute: "Hora de término (hora e minutos)",
  endTimeHourMinuteSecond: "Hora de término (hora, minutos e segundos)",
  endTimeLabel: "Hora de término",
  openCalendar: "Abrir agenda",
  startTime: "Hora de início",
  startTimeHour: "Hora de início (hora)",
  startTimeHourMinute: "Hora de início (hora e minutos)",
  startTimeHourMinuteSecond: "Hora de início (hora, minutos e segundos)",
  startTimeLabel: "Hora de início"
}, C = {
  en: /* @__PURE__ */ T(ee),
  de: /* @__PURE__ */ T(te),
  es: /* @__PURE__ */ T(ne),
  "fr-FR": /* @__PURE__ */ T(re),
  "pt-BR": /* @__PURE__ */ T(ae)
}, ie = ({
  hideTimeZone: s,
  hourCycle: i
}) => {
  const d = R(C), e = k(D), { granularity: u, value: a } = e, o = P(null), l = P(a);
  return u === "day" ? null : (j(() => {
    let m;
    if (a?.start && l.current?.start?.compare(a.start) !== 0 || a?.end && l.current?.end?.compare(a.end) !== 0) {
      const c = o.current, p = document.activeElement;
      c?.contains(p) && p?.getAttribute("role") === "spinbutton" || (m = setTimeout(() => {
        if (c) {
          const t = c.querySelector(
            '[role="spinbutton"]'
          );
          t && t.focus();
        }
      }, 50));
    }
    return l.current = a, () => {
      m && clearTimeout(m);
    };
  }, [a]), /* @__PURE__ */ f(
    $,
    {
      ref: o,
      borderTop: "solid-25",
      borderColor: "neutral.3",
      py: "300",
      px: "400",
      alignItems: "center",
      justifyContent: "center",
      gap: "200",
      children: [
        /* @__PURE__ */ f($, { alignItems: "center", gap: "200", children: [
          /* @__PURE__ */ n(
            M,
            {
              textStyle: "xs",
              fontWeight: "500",
              color: "neutral.12",
              minWidth: "fit-content",
              children: d.format("startTimeLabel")
            }
          ),
          /* @__PURE__ */ n(
            x,
            {
              slot: "startTimeInput",
              variant: "ghost",
              size: "sm",
              hideTimeZone: s,
              hourCycle: i
            }
          )
        ] }),
        /* @__PURE__ */ f($, { alignItems: "center", gap: "200", children: [
          /* @__PURE__ */ n(
            M,
            {
              textStyle: "xs",
              fontWeight: "500",
              color: "neutral.12",
              minWidth: "fit-content",
              children: d.format("endTimeLabel")
            }
          ),
          /* @__PURE__ */ n(
            x,
            {
              slot: "endTimeInput",
              variant: "ghost",
              size: "sm",
              hideTimeZone: s,
              hourCycle: i
            }
          )
        ] })
      ]
    }
  ));
}, oe = ({
  children: s
}) => {
  const i = R(C), d = G(y) || {}, e = k(D), u = (t) => t?.day && t?.month && t?.year, a = !e?.value || !u(e.value.start) || !u(e.value.end), { granularity: o } = e, l = e?.value?.start && "hour" in e.value.start ? e.value.start : null, m = e?.value?.end && "hour" in e.value.end ? e.value.end : null, b = d?.isDisabled, c = (t) => {
    const r = t === "start" ? "start" : "end";
    switch (o) {
      case "hour":
        return i.format(
          `${r}TimeHour`
        );
      case "minute":
        return i.format(
          `${r}TimeHourMinute`
        );
      case "second":
        return i.format(
          `${r}TimeHourMinuteSecond`
        );
      default:
        return i.format(`${r}Time`);
    }
  }, p = {
    /** toggles the calendar popover */
    calendarToggle: {
      ...d,
      onPress: (t) => {
        const r = document?.activeElement;
        r && r.blur(), d.onPress?.(t);
      }
    },
    /** 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: {
      // Clear both start and end values
      onPress: () => e?.setValue(null),
      "aria-label": i.format("clearInput"),
      isDisabled: b,
      // Hide the button when there's no value
      style: a ? { display: "none" } : void 0,
      "aria-hidden": a ? !0 : void 0
    }
  }, S = {
    startTimeInput: {
      value: l,
      onChange: (t) => {
        if (t !== null && e?.value?.start) {
          const r = e.value, h = r.start, g = r.end;
          if (h && g) {
            const v = h.set({
              hour: t.hour,
              minute: t.minute || 0,
              second: t.second || 0,
              millisecond: t.millisecond || 0
            });
            e.setValue({
              start: v,
              end: g
            });
          }
        }
      },
      granularity: o === "day" ? void 0 : o,
      "aria-label": c("start")
    },
    endTimeInput: {
      value: m,
      onChange: (t) => {
        if (t !== null && e?.value?.end) {
          const r = e.value, h = r.start, g = r.end;
          if (h && g) {
            const v = g.set({
              hour: t.hour,
              minute: t.minute || 0,
              second: t.second || 0,
              millisecond: t.millisecond || 0
            });
            e.setValue({
              start: h,
              end: v
            });
          }
        }
      },
      granularity: o === "day" ? void 0 : o,
      "aria-label": c("end")
    }
  };
  return /* @__PURE__ */ n(
    K,
    {
      values: [
        [
          y,
          {
            slots: p
          }
        ],
        [q, { slots: S }]
      ],
      children: s
    }
  );
}, se = (s) => {
  const i = R(C), { granularity: d = "day", hideTimeZone: e, hourCycle: u } = s, a = B({ recipe: O }), [o, l] = a.splitVariantProps(s), [m, b] = W(l), { size: c = "md" } = o, p = c === "md" ? "xs" : "2xs", S = d === "day" ? s.shouldCloseOnSelect : !1;
  return /* @__PURE__ */ n(Q, { ...o, ...m, asChild: !0, children: /* @__PURE__ */ n(
    F,
    {
      ...b,
      shouldCloseOnSelect: S,
      children: /* @__PURE__ */ f(oe, { children: [
        /* @__PURE__ */ n(U, { asChild: !0, children: /* @__PURE__ */ f(A, { children: [
          /* @__PURE__ */ n(
            z,
            {
              slot: "start",
              size: s.size,
              variant: "plain",
              width: "auto",
              hideTimeZone: e,
              hourCycle: u
            }
          ),
          /* @__PURE__ */ n(
            M,
            {
              as: "span",
              px: "150",
              color: "neutral.11",
              userSelect: "none",
              "aria-hidden": "true",
              slot: null,
              children: "–"
            }
          ),
          /* @__PURE__ */ n(
            z,
            {
              slot: "end",
              size: s.size,
              variant: "plain",
              width: "auto",
              hideTimeZone: e,
              hourCycle: u
            }
          ),
          /* @__PURE__ */ f(X, { children: [
            /* @__PURE__ */ n(
              I,
              {
                variant: "ghost",
                size: p,
                slot: "clear",
                "aria-label": i.format("clearSelection"),
                children: /* @__PURE__ */ n(L, {})
              }
            ),
            /* @__PURE__ */ n(
              I,
              {
                variant: "ghost",
                size: p,
                slot: "calendarToggle",
                "aria-label": i.format("openCalendar"),
                children: /* @__PURE__ */ n(V, {})
              }
            )
          ] })
        ] }) }),
        /* @__PURE__ */ n(Y, { asChild: !0, children: /* @__PURE__ */ n(w, { placement: "bottom end", children: /* @__PURE__ */ f(_, { children: [
          /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(N, {}) }),
          /* @__PURE__ */ n(
            ie,
            {
              hideTimeZone: e,
              hourCycle: u
            }
          )
        ] }) }) })
      ] })
    }
  ) });
};
se.displayName = "DateRangePicker";
export {
  se as D
};
//# sourceMappingURL=date-range-picker-BvlE8omk.es.js.map
