import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "@open-mercato/shared/lib/utils";
import { Button } from "../../primitives/button.js";
import {
  getMessagePriorityLabel,
  getMessagePriorityOptions,
  getNextMessagePriority,
  getPreviousMessagePriority
} from "./message-priority.js";
function MessagePrioritySelector({
  value,
  onChange,
  t,
  className
}) {
  const options = React.useMemo(() => getMessagePriorityOptions(t), [t]);
  const selectedLabel = React.useMemo(() => getMessagePriorityLabel(value, t), [t, value]);
  const selectorLabel = t("messages.priority", "Priority");
  const handleKeyDown = React.useCallback((event) => {
    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
      event.preventDefault();
      onChange(getNextMessagePriority(value));
      return;
    }
    if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
      event.preventDefault();
      onChange(getPreviousMessagePriority(value));
    }
  }, [onChange, value]);
  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        className: "inline-flex w-full items-center gap-1 rounded-md border bg-background p-1 sm:w-auto",
        role: "radiogroup",
        "aria-label": selectorLabel,
        tabIndex: 0,
        onKeyDown: handleKeyDown,
        children: options.map((option) => {
          const Icon = option.icon;
          const isSelected = value === option.value;
          return /* @__PURE__ */ jsxs(
            Button,
            {
              type: "button",
              size: "sm",
              variant: isSelected ? "outline" : "ghost",
              role: "radio",
              "aria-checked": isSelected,
              "aria-label": option.label,
              title: option.label,
              className: cn(
                "h-7 gap-1 px-2 text-xs sm:text-sm",
                isSelected ? "ring-1 ring-primary/40" : null
              ),
              onClick: () => onChange(option.value),
              children: [
                /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
                /* @__PURE__ */ jsx("span", { children: option.label })
              ]
            },
            option.value
          );
        })
      }
    ),
    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: selectedLabel })
  ] });
}
export {
  MessagePrioritySelector
};
//# sourceMappingURL=MessagePrioritySelector.js.map
