import { cn } from './chunk-3NHAT7D4.mjs';
import { useLocalStorage } from './chunk-VVWQTO4Y.mjs';
import React from 'react';

function ImageMappingPanel({
  title,
  items,
  value,
  onChange,
  className,
  uploadLabel = "\u4E0A\u4F20\u56FE\u7247",
  clearLabel = "\u6E05\u9664"
}) {
  const handleFileChange = (id, file) => {
    if (!file) {
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      const base64 = typeof reader.result === "string" ? reader.result : "";
      if (!base64) {
        return;
      }
      onChange({
        ...value,
        [id]: base64
      });
    };
    reader.readAsDataURL(file);
  };
  const handleRemove = (id) => {
    const next = { ...value };
    delete next[id];
    onChange(next);
  };
  return /* @__PURE__ */ React.createElement("details", { className: cn("rounded-lg border border-slate-200 bg-white/80 p-3", className) }, /* @__PURE__ */ React.createElement("summary", { className: "cursor-pointer text-sm font-semibold text-slate-700" }, title), /* @__PURE__ */ React.createElement("div", { className: "mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2" }, items.map((item) => {
    const image = value[item.id];
    return /* @__PURE__ */ React.createElement(
      "div",
      {
        key: item.id,
        className: "flex items-center gap-2 rounded-md border border-slate-200 bg-white p-2"
      },
      /* @__PURE__ */ React.createElement("div", { className: "w-16 text-xs font-semibold text-slate-600" }, item.label),
      /* @__PURE__ */ React.createElement("label", { className: "flex-1 cursor-pointer rounded-md bg-cyan-600 px-2 py-1 text-center text-xs font-medium text-white" }, uploadLabel, /* @__PURE__ */ React.createElement(
        "input",
        {
          type: "file",
          accept: "image/*",
          className: "hidden",
          onChange: (event) => {
            handleFileChange(item.id, event.target.files?.[0]);
            event.currentTarget.value = "";
          }
        }
      )),
      image ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
        "img",
        {
          src: image,
          alt: item.label,
          className: "h-8 w-8 rounded-full border border-slate-200 object-cover"
        }
      ), /* @__PURE__ */ React.createElement(
        "button",
        {
          type: "button",
          className: "rounded-md border border-red-200 px-2 py-1 text-xs text-red-600",
          onClick: () => handleRemove(item.id)
        },
        clearLabel
      )) : null
    );
  })));
}
function LocalImageMappingPanel({
  storageKey,
  defaultValue = {},
  onValueChange,
  ...panelProps
}) {
  const [value, setValue] = useLocalStorage(storageKey, defaultValue);
  return /* @__PURE__ */ React.createElement(
    ImageMappingPanel,
    {
      ...panelProps,
      value,
      onChange: (next) => {
        setValue(next);
        onValueChange?.(next);
      }
    }
  );
}

export { ImageMappingPanel, LocalImageMappingPanel };
//# sourceMappingURL=chunk-EGJPS7OL.mjs.map
//# sourceMappingURL=chunk-EGJPS7OL.mjs.map