"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Plus, Trash2 } from "lucide-react";
import { Button } from "../../ui/button.js";
import { Input } from "../../ui/input.js";
import { Checkbox } from "../../ui/checkbox.js";
import { useTranslations } from "next-intl";
function KeyValueEditor({
  items,
  onChange,
  keyPlaceholder,
  valuePlaceholder,
  dataCyPrefix
}) {
  const t = useTranslations("devtools.apiTester.editor");
  const addItem = () => {
    onChange([
      ...items,
      { id: crypto.randomUUID(), key: "", value: "", enabled: true }
    ]);
  };
  const removeItem = (id) => {
    onChange(items.filter((item) => item.id !== id));
  };
  const updateItem = (id, field, value) => {
    onChange(
      items.map(
        (item) => item.id === id ? { ...item, [field]: value } : item
      )
    );
  };
  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-cy": `${dataCyPrefix}-editor`, children: [
    items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", "data-cy": `${dataCyPrefix}-row-${index}`, children: [
      /* @__PURE__ */ jsx(
        Checkbox,
        {
          checked: item.enabled,
          onCheckedChange: (checked) => updateItem(item.id, "enabled", !!checked),
          "data-cy": `${dataCyPrefix}-row-${index}-enabled`
        }
      ),
      /* @__PURE__ */ jsx(
        Input,
        {
          placeholder: keyPlaceholder || t("keyPlaceholder"),
          value: item.key,
          onChange: (e) => updateItem(item.id, "key", e.target.value),
          className: "flex-1 font-mono text-sm",
          "data-cy": `${dataCyPrefix}-row-${index}-key`
        }
      ),
      /* @__PURE__ */ jsx(
        Input,
        {
          placeholder: valuePlaceholder || t("valuePlaceholder"),
          value: item.value,
          onChange: (e) => updateItem(item.id, "value", e.target.value),
          className: "flex-1 font-mono text-sm",
          "data-cy": `${dataCyPrefix}-row-${index}-value`
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          variant: "ghost",
          size: "icon",
          onClick: () => removeItem(item.id),
          className: "shrink-0",
          "data-cy": `${dataCyPrefix}-row-${index}-delete`,
          children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
        }
      )
    ] }, item.id)),
    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "outline",
        size: "sm",
        onClick: addItem,
        "data-cy": `${dataCyPrefix}-add-btn`,
        children: [
          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
          t("addButton")
        ]
      }
    ) })
  ] });
}
export {
  KeyValueEditor
};
