import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
import { Button } from "@open-mercato/ui/primitives/button";
import { AppearanceSelector } from "./AppearanceSelector.js";
function DictionaryForm({
  mode,
  initialValues,
  onSubmit,
  onCancel,
  submitting = false,
  translations,
  iconSuggestions,
  iconLibrary
}) {
  const initialFormValues = React.useMemo(() => ({
    ...initialValues,
    appearance: {
      color: initialValues.color ?? null,
      icon: initialValues.icon ?? null
    }
  }), [initialValues]);
  const fields = React.useMemo(() => {
    const valueField = {
      id: "value",
      label: translations.valueLabel,
      type: "text",
      required: true,
      description: translations.valueDescription
    };
    const labelField = {
      id: "label",
      label: translations.labelLabel,
      type: "text"
    };
    const appearanceField = {
      id: "appearance",
      label: translations.appearance.iconLabel,
      type: "custom",
      component: ({ value, setValue, disabled }) => {
        const appearance = value && typeof value === "object" ? value : { color: null, icon: null };
        const currentColor = typeof appearance.color === "string" ? appearance.color : null;
        const currentIcon = typeof appearance.icon === "string" ? appearance.icon : null;
        return /* @__PURE__ */ jsx(
          AppearanceSelector,
          {
            icon: currentIcon,
            color: currentColor,
            onIconChange: (next) => {
              const sanitized = typeof next === "string" && next.trim().length ? next.trim() : null;
              setValue({
                color: currentColor,
                icon: sanitized
              });
            },
            onColorChange: (next) => {
              const sanitized = typeof next === "string" && next.trim().length ? next.trim() : null;
              setValue({
                color: sanitized,
                icon: currentIcon
              });
            },
            labels: translations.appearance,
            iconSuggestions,
            iconLibrary,
            disabled: Boolean(disabled) || submitting
          }
        );
      }
    };
    return [valueField, labelField, appearanceField];
  }, [iconLibrary, iconSuggestions, mode, submitting, translations]);
  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(
    CrudForm,
    {
      title: translations.title,
      fields,
      initialValues: initialFormValues,
      submitLabel: translations.saveLabel,
      embedded: true,
      extraActions: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting, children: translations.cancelLabel }),
      isLoading: false,
      onSubmit: async (values) => {
        const appearance = values.appearance && typeof values.appearance === "object" ? values.appearance : { color: null, icon: null };
        const submittedColor = typeof appearance.color === "string" && appearance.color.trim().length ? appearance.color.trim() : null;
        const submittedIcon = typeof appearance.icon === "string" && appearance.icon.trim().length ? appearance.icon.trim() : null;
        await onSubmit({
          value: values.value.trim(),
          label: values.label?.trim() || values.value.trim(),
          color: submittedColor,
          icon: submittedIcon
        });
      }
    }
  ) });
}
export {
  DictionaryForm
};
//# sourceMappingURL=DictionaryForm.js.map
