"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 { Popover, PopoverContent, PopoverTrigger } from "../../primitives/popover.js";
import { TimeInput } from "./TimeInput.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 = 1,
  showNowButton = true,
  showClearButton = true
}) {
  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 handleTimeChange = React.useCallback(
    (time) => {
      onChange(time);
    },
    [onChange]
  );
  const handleNow = React.useCallback(() => {
    onChange(currentHHMM());
    setOpen(false);
  }, [onChange]);
  const handleClear = React.useCallback(() => {
    onChange(null);
    setOpen(false);
  }, [onChange]);
  const isInteractive = !disabled && !readOnly;
  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: isInteractive ? setOpen : void 0, children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      "button",
      {
        type: "button",
        "data-crud-focus-target": "",
        disabled,
        "aria-haspopup": "dialog",
        className: cn(
          "w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left",
          "bg-background transition-colors",
          "focus:outline-none focus:ring-2 focus:ring-ring focus: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 ? void 0 : (e) => e.preventDefault(),
        children: [
          /* @__PURE__ */ jsx(ClockIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: value ?? placeholderText })
        ]
      }
    ) }),
    /* @__PURE__ */ jsxs(PopoverContent, { className: "p-3 w-auto min-w-[180px]", children: [
      /* @__PURE__ */ jsx(
        TimeInput,
        {
          value,
          onChange: handleTimeChange,
          minuteStep
        }
      ),
      (showNowButton || showClearButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mt-3 pt-2 border-t", children: [
        showNowButton && /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: handleNow,
            className: "text-sm text-primary hover:underline focus:outline-none",
            children: nowText
          }
        ),
        showClearButton && /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: handleClear,
            className: "text-sm text-muted-foreground hover:text-foreground hover:underline focus:outline-none ml-auto",
            children: clearText
          }
        )
      ] })
    ] })
  ] });
}
export {
  TimePicker
};
//# sourceMappingURL=TimePicker.js.map
