"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "@open-mercato/shared/lib/utils";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Button } from "@open-mercato/ui/primitives/button";
import { Input } from "@open-mercato/ui/primitives/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
import { DateControl, LABEL_CLASS } from "./inputs.js";
import { SegmentGroup } from "./SegmentGroup.js";
const DAY_LABEL_KEYS = [
  { letterKey: "customers.calendar.editor.repeat.days.mon", letterFallback: "M", ariaKey: "customers.calendar.day.mon", ariaFallback: "MON" },
  { letterKey: "customers.calendar.editor.repeat.days.tue", letterFallback: "T", ariaKey: "customers.calendar.day.tue", ariaFallback: "TUE" },
  { letterKey: "customers.calendar.editor.repeat.days.wed", letterFallback: "W", ariaKey: "customers.calendar.day.wed", ariaFallback: "WED" },
  { letterKey: "customers.calendar.editor.repeat.days.thu", letterFallback: "T", ariaKey: "customers.calendar.day.thu", ariaFallback: "THU" },
  { letterKey: "customers.calendar.editor.repeat.days.fri", letterFallback: "F", ariaKey: "customers.calendar.day.fri", ariaFallback: "FRI" },
  { letterKey: "customers.calendar.editor.repeat.days.sat", letterFallback: "S", ariaKey: "customers.calendar.day.sat", ariaFallback: "SAT" },
  { letterKey: "customers.calendar.editor.repeat.days.sun", letterFallback: "S", ariaKey: "customers.calendar.day.sun", ariaFallback: "SUN" }
];
function RepeatField({
  freq,
  days,
  endType,
  count,
  untilDate,
  locale,
  onFreqChange,
  onToggleDay,
  onEndTypeChange,
  onCountChange,
  onUntilDateChange
}) {
  const t = useT();
  const freqLabel = t("customers.calendar.editor.repeat.label", "Repeat");
  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2.5", children: [
    /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: freqLabel }),
    /* @__PURE__ */ jsxs(
      Select,
      {
        value: freq,
        onValueChange: (value) => onFreqChange(value),
        children: [
          /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": freqLabel, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
          /* @__PURE__ */ jsxs(SelectContent, { children: [
            /* @__PURE__ */ jsx(SelectItem, { value: "none", children: t("customers.calendar.editor.repeat.freq.none", "Does not repeat") }),
            /* @__PURE__ */ jsx(SelectItem, { value: "daily", children: t("customers.calendar.editor.repeat.freq.daily", "Daily") }),
            /* @__PURE__ */ jsx(SelectItem, { value: "weekly", children: t("customers.calendar.editor.repeat.freq.weekly", "Weekly") })
          ] })
        ]
      }
    ),
    freq === "weekly" ? /* @__PURE__ */ jsx("div", { className: "flex items-start gap-1.5", children: DAY_LABEL_KEYS.map((day, index) => {
      const isActive = Boolean(days[index]);
      return /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: isActive ? "default" : "outline",
          "aria-pressed": isActive,
          "aria-label": t(day.ariaKey, day.ariaFallback),
          onClick: () => onToggleDay(index),
          className: cn(
            "size-9 px-0 text-xs font-medium",
            !isActive && "text-muted-foreground"
          ),
          children: t(day.letterKey, day.letterFallback)
        },
        day.ariaKey
      );
    }) }) : null,
    freq !== "none" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
      /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: t("customers.calendar.editor.repeat.ends", "Ends") }),
      /* @__PURE__ */ jsx(
        SegmentGroup,
        {
          ariaLabel: t("customers.calendar.editor.repeat.ends", "Ends"),
          value: endType,
          onChange: onEndTypeChange,
          options: [
            { value: "never", label: t("customers.calendar.editor.repeat.never", "Never") },
            { value: "date", label: t("customers.calendar.editor.repeat.onDate", "On date") },
            { value: "count", label: t("customers.calendar.editor.repeat.after", "After") }
          ]
        }
      ),
      endType === "date" ? /* @__PURE__ */ jsx(
        DateControl,
        {
          className: "w-44",
          value: untilDate || "",
          onChange: onUntilDateChange,
          ariaLabel: t("customers.calendar.editor.repeat.onDate", "On date"),
          locale
        }
      ) : null,
      endType === "count" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "number",
            min: 1,
            max: 365,
            value: count,
            onChange: (event) => {
              const next = Number(event.target.value);
              if (Number.isInteger(next) && next >= 1) onCountChange(next);
            },
            "aria-label": t("customers.calendar.editor.repeat.after", "After"),
            className: "h-9 w-20"
          }
        ),
        /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: t("customers.calendar.editor.repeat.times", "times") })
      ] }) : null
    ] }) : null
  ] });
}
export {
  RepeatField
};
//# sourceMappingURL=RepeatField.js.map
