"use client";
import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
import { collectCustomFieldValues } from "@open-mercato/ui/backend/utils/customFieldValues";
import { normalizeCustomFieldValues } from "@open-mercato/shared/lib/custom-fields/normalize";
import { AppearanceSelector } from "@open-mercato/core/modules/dictionaries/components/AppearanceSelector";
import { E } from "../../../generated/entities.ids.generated.js";
import { useT } from "@open-mercato/shared/lib/i18n/context";
const normalizeCustomFieldSubmitValue = (value) => {
  const normalized = normalizeCustomFieldValues({ value });
  return normalized.value;
};
const buildTeamRolePayload = (values, options = {}) => {
  const name = typeof values.name === "string" ? values.name.trim() : "";
  const description = typeof values.description === "string" && values.description.trim().length ? values.description.trim() : null;
  const teamId = typeof values.teamId === "string" && values.teamId.trim().length ? values.teamId : null;
  const appearance = values.appearance && typeof values.appearance === "object" ? values.appearance : {};
  const customFields = collectCustomFieldValues(values, { transform: normalizeCustomFieldSubmitValue });
  return {
    ...options.id ? { id: options.id } : {},
    teamId,
    name,
    description,
    appearanceIcon: appearance.icon ?? null,
    appearanceColor: appearance.color ?? null,
    ...Object.keys(customFields).length ? { customFields } : {}
  };
};
function TeamRoleForm(props) {
  const {
    title,
    submitLabel,
    backHref,
    cancelHref,
    initialValues,
    teamOptions,
    onSubmit,
    onDelete,
    isLoading,
    loadingMessage,
    extraActions
  } = props;
  const t = useT();
  const appearanceLabels = React.useMemo(() => ({
    colorLabel: t("staff.teamRoles.form.appearance.colorLabel", "Color"),
    colorHelp: t("staff.teamRoles.form.appearance.colorHelp", "Pick a color for this team role."),
    colorClearLabel: t("staff.teamRoles.form.appearance.colorClear", "Clear color"),
    iconLabel: t("staff.teamRoles.form.appearance.iconLabel", "Icon"),
    iconPlaceholder: t("staff.teamRoles.form.appearance.iconPlaceholder", "Type an emoji or icon name"),
    iconPickerTriggerLabel: t("staff.teamRoles.form.appearance.iconPicker", "Browse icons"),
    iconSearchPlaceholder: t("staff.teamRoles.form.appearance.iconSearch", "Search icons or emojis\u2026"),
    iconSearchEmptyLabel: t("staff.teamRoles.form.appearance.iconSearchEmpty", "No icons match your search"),
    iconSuggestionsLabel: t("staff.teamRoles.form.appearance.iconSuggestions", "Suggestions"),
    iconClearLabel: t("staff.teamRoles.form.appearance.iconClear", "Clear icon"),
    previewEmptyLabel: t("staff.teamRoles.form.appearance.previewEmpty", "No appearance selected")
  }), [t]);
  const fields = React.useMemo(() => {
    const base = [];
    if (teamOptions) {
      base.push({
        id: "teamId",
        label: t("staff.teamRoles.form.fields.team", "Team"),
        type: "select",
        listbox: true,
        options: [
          { value: "", label: t("staff.teamRoles.form.fields.team.unassigned", "Unassigned") },
          ...teamOptions.map((team) => ({ value: team.id, label: team.name }))
        ]
      });
    }
    base.push(
      { id: "name", label: t("staff.teamRoles.form.fields.name", "Name"), type: "text", required: true },
      { id: "description", label: t("staff.teamRoles.form.fields.description", "Description"), type: "richtext", editor: "uiw" },
      {
        id: "appearance",
        label: t("staff.teamRoles.form.appearance.label", "Appearance"),
        type: "custom",
        component: ({ value, setValue }) => {
          const current = value && typeof value === "object" ? value : {};
          return /* @__PURE__ */ jsx(
            AppearanceSelector,
            {
              icon: current.icon ?? null,
              color: current.color ?? null,
              onIconChange: (next) => setValue({ ...current, icon: next }),
              onColorChange: (next) => setValue({ ...current, color: next }),
              labels: appearanceLabels
            }
          );
        }
      }
    );
    return base;
  }, [appearanceLabels, t, teamOptions]);
  const groups = React.useMemo(() => [
    { id: "details", fields: teamOptions ? ["teamId", "name", "description", "appearance"] : ["name", "description", "appearance"] },
    { id: "custom", title: t("entities.customFields.title", "Custom Attributes"), column: 2, kind: "customFields" }
  ], [t, teamOptions]);
  return /* @__PURE__ */ jsx(
    CrudForm,
    {
      title,
      backHref,
      cancelHref,
      versionHistory: initialValues.id ? { resourceKind: "staff.teamRole", resourceId: String(initialValues.id) } : void 0,
      submitLabel,
      fields,
      groups,
      entityId: E.staff.staff_team_role,
      initialValues,
      optimisticLockUpdatedAt: initialValues.updatedAt,
      onSubmit,
      onDelete,
      isLoading,
      loadingMessage,
      extraActions
    }
  );
}
export {
  TeamRoleForm,
  buildTeamRolePayload
};
//# sourceMappingURL=TeamRoleForm.js.map
