govoplan-campaign/webui/src/features/campaigns/components/TemplatePlaceholderControls.tsx

import { useEffect, useMemo, useState } from "react";
import { Button } from "@govoplan/core-webui";
import { Dialog } from "@govoplan/core-webui";
import { DismissibleAlert, i18nMessage } from "@govoplan/core-webui";
import type { TemplateNamespace, TemplatePlaceholder, UndefinedPlaceholder } from "../utils/templatePlaceholders";

export type TemplateFieldOption = {
  name: string;
  label: string;
};

export function TemplateFieldChipList({
  namespace,
  fields,
  usedPlaceholders = [],
  empty,
  disabled = false,
  onInsert







}: {namespace: TemplateNamespace;fields: TemplateFieldOption[];usedPlaceholders?: TemplatePlaceholder[];empty: string;disabled?: boolean;onInsert: (namespace: TemplateNamespace, name: string) => void;}) {
  if (fields.length === 0) return <p className="muted">{empty}</p>;
  return (
    <div className="field-chip-list">
      {fields.map((field) => {
        const used = usedPlaceholders.some((placeholder) => placeholder.validNamespace && placeholder.namespace === namespace && placeholder.name === field.name);
        return (
          <button
            type="button"
            className={`field-chip field-chip-button ${used ? "used" : ""}`}
            key={`${namespace}:${field.name}`}
            disabled={disabled}
            onClick={() => onInsert(namespace, field.name)}>
            
            <span className="field-chip-namespace">{namespace}</span><span title={field.label !== field.name ? field.label : undefined}>{field.name}</span>
          </button>);

      })}
    </div>);

}

export function UndefinedPlaceholderList({
  items,
  empty = "i18n:govoplan-campaign.no_undefined_placeholders_detected.1cbdf41b",
  onSelect




}: {items: UndefinedPlaceholder[];empty?: string;onSelect: (item: UndefinedPlaceholder) => void;}) {
  if (items.length === 0) return <p className="muted">{empty}</p>;
  return (
    <div className="field-chip-list">
      {items.map((item) =>
      <button
        type="button"
        className="field-chip field-chip-button undefined"
        key={`${item.raw}:${item.reason}`}
        onClick={() => onSelect(item)}>
        
          {item.display}
        </button>
      )}
    </div>);

}

export function UndefinedPlaceholderDecisionDialog({
  field,
  contextLabel = "template",
  removeLabel = "i18n:govoplan-campaign.remove_placeholder.3f575c72",
  localFields = [],
  globalFields = [],
  onCancel,
  onRemove,
  onReplace,
  onAddField,
  addDisabled = false











}: {field: UndefinedPlaceholder | null;contextLabel?: string;removeLabel?: string;localFields?: TemplateFieldOption[];globalFields?: TemplateFieldOption[];onCancel: () => void;onRemove: (field: UndefinedPlaceholder) => void;onReplace?: (field: UndefinedPlaceholder, namespace: TemplateNamespace, name: string) => void;onAddField: (field: UndefinedPlaceholder) => void;addDisabled?: boolean;}) {
  const replacementOptions = useMemo(
    () => [
    ...localFields.map((item) => ({ namespace: "local" as const, ...item })),
    ...globalFields.map((item) => ({ namespace: "global" as const, ...item }))],

    [globalFields, localFields]
  );
  const [replacement, setReplacement] = useState("");
  const firstReplacement = replacementOptions[0];
  const effectiveReplacement = replacement || (firstReplacement ? `${firstReplacement.namespace}:${firstReplacement.name}` : "");

  useEffect(() => {
    setReplacement(firstReplacement ? `${firstReplacement.namespace}:${firstReplacement.name}` : "");
  }, [field?.raw, firstReplacement?.namespace, firstReplacement?.name]);

  function replaceWithSelected() {
    if (!field || !onReplace || !effectiveReplacement) return;
    const separator = effectiveReplacement.indexOf(":");
    if (separator < 0) return;
    const namespace = effectiveReplacement.slice(0, separator) as TemplateNamespace;
    const name = effectiveReplacement.slice(separator + 1);
    onReplace(field, namespace, name);
  }

  return (
    <Dialog
      open={Boolean(field)}
      title="i18n:govoplan-campaign.undefined_field_reference.4ff8e266"
      closeLabel="i18n:govoplan-campaign.return_to_editing.37d4a5f0"
      className="template-action-dialog"
      onClose={onCancel}
      footer={field ?
      <>
          <Button onClick={onCancel}>i18n:govoplan-campaign.continue_editing.b101465f</Button>
          <Button onClick={() => onRemove(field)}>{removeLabel}</Button>
          {onReplace && replacementOptions.length > 0 && <Button onClick={replaceWithSelected}>i18n:govoplan-campaign.replace.a7cf7b25</Button>}
          <Button variant="primary" onClick={() => onAddField(field)} disabled={!field.name || field.reason === "invalid-namespace" || addDisabled}>i18n:govoplan-campaign.add_field.039c6315</Button>
        </> :
      undefined}>
      
      {field &&
      <>
          <p>i18n:govoplan-campaign.the.93ef0dd8 {contextLabel} uses <code>{i18nMessage("i18n:govoplan-campaign.value.91317e63", { value0: field.raw })}</code>i18n:govoplan-campaign.but_it_cannot_be_matched_to_a_known_field.e75c4dde</p>
          {field.reason === "invalid-namespace" &&
        <DismissibleAlert tone="warning">i18n:govoplan-campaign.use_the_namespace.a4c2669d <code>global:</code> or <code>local:</code>.</DismissibleAlert>
        }
          {field.reason === "missing-field" &&
        <p className="muted">i18n:govoplan-campaign.you_can_add.66093419 <strong>{field.name}</strong> i18n:govoplan-campaign.as_a_campaign_field_remove_this_placeholder_or_c.6bf2dea8</p>
        }
          {onReplace && replacementOptions.length > 0 &&
        <label className="template-replacement-field">
              <span>i18n:govoplan-campaign.replace_by_existing_field.ee3dc0eb</span>
              <select value={effectiveReplacement} onChange={(event) => setReplacement(event.target.value)}>
                {replacementOptions.map((option) =>
            <option key={`${option.namespace}:${option.name}`} value={`${option.namespace}:${option.name}`}>
                    {option.namespace}:{option.label || option.name}
                  </option>
            )}
              </select>
            </label>
        }
        </>
      }
    </Dialog>);

}