"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { ClockIcon } from "lucide-react";
import { cn } from "@open-mercato/shared/lib/utils";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import {
  TimePicker as TimePickerPrimitive,
  formatTimePickerDisplay
} from "../../primitives/time-picker.js";
function currentHHMM() {
  const now = /* @__PURE__ */ new Date();
  const hour = String(now.getHours()).padStart(2, "0");
  const minute = String(now.getMinutes()).padStart(2, "0");
  return `${hour}:${minute}`;
}
function TimePicker({
  value,
  onChange,
  placeholder,
  disabled = false,
  readOnly = false,
  className,
  minuteStep = 30,
  showNowButton = true,
  // Default changed 2026-05-11 from `true` → `false`: the new primitive's Cancel
  // button already exits the popover without committing, which is what users mean
  // by "Clear" in most flows. Pass `showClearButton={true}` to opt back in when
  // you need an explicit "set value to null" action distinct from "dismiss".
  showClearButton = false
}) {
  const t = useT();
  const [open, setOpen] = React.useState(false);
  const placeholderText = placeholder ?? t("ui.timePicker.placeholder", "Pick a time");
  const nowText = t("ui.timePicker.nowButton", "Now");
  const clearText = t("ui.timePicker.clearButton", "Clear");
  const isInteractive = !disabled && !readOnly;
  const displayValue = value ? (() => {
    const { main, suffix } = formatTimePickerDisplay(value, "12h");
    return suffix ? `${main} ${suffix}` : main;
  })() : null;
  const triggerButton = /* @__PURE__ */ jsxs(
    "button",
    {
      type: "button",
      "data-crud-focus-target": "",
      disabled,
      "aria-haspopup": "dialog",
      className: cn(
        "w-full h-10 flex items-center gap-2 rounded-md border bg-background px-3 text-sm text-left transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
        "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
        readOnly && "cursor-default opacity-70",
        !value && "text-muted-foreground",
        className
      ),
      onClick: !isInteractive ? (event) => event.preventDefault() : void 0,
      children: [
        /* @__PURE__ */ jsx(ClockIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: displayValue ?? placeholderText })
      ]
    }
  );
  if (!isInteractive) {
    return triggerButton;
  }
  const pinnedTopActions = [];
  if (showNowButton) {
    const nowValue = currentHHMM();
    const { main: nowMain, suffix: nowSuffix } = formatTimePickerDisplay(nowValue, "12h");
    pinnedTopActions.push({
      label: nowText,
      icon: /* @__PURE__ */ jsx(ClockIcon, { "aria-hidden": "true" }),
      rightText: nowSuffix ? `${nowMain} ${nowSuffix}` : nowMain,
      onClick: () => {
        onChange(nowValue);
        setOpen(false);
      }
    });
  }
  const legacyFooterActions = [];
  if (showClearButton) {
    legacyFooterActions.push({
      label: clearText,
      onClick: () => {
        onChange(null);
        setOpen(false);
      },
      variant: "muted"
    });
  }
  return /* @__PURE__ */ jsx(
    TimePickerPrimitive,
    {
      value: value ?? null,
      onChange: (next) => onChange(next),
      onApply: (next) => {
        onChange(next);
      },
      intervalMinutes: Math.max(1, minuteStep),
      showHeader: false,
      showFooter: true,
      headerPlaceholder: placeholderText,
      pinnedTopActions: pinnedTopActions.length > 0 ? pinnedTopActions : void 0,
      legacyFooterActions: legacyFooterActions.length > 0 ? legacyFooterActions : void 0,
      trigger: triggerButton,
      open,
      onOpenChange: setOpen,
      disabled
    }
  );
}
export {
  TimePicker
};
//# sourceMappingURL=TimePicker.js.map
