import type { RowField } from "../lib/api";
import type { Lang, T } from "../lib/i18n";

interface Props {
  fields: RowField[];
  lang: Lang;
  t: T;
  onChange: (fields: RowField[]) => void;
}

/** Kolumn-editorn för extract_row: lista av {name, by, value, role?}. */
export function RowFieldsEditor({ fields, t, onChange }: Props) {
  const set = (i: number, patch: Partial<RowField>) =>
    onChange(fields.map((f, j) => (j === i ? { ...f, ...patch } : f)));

  return (
    <div className="row-fields">
      {fields.map((f, i) => (
        <div className="row-field" key={i}>
          <div className="row-field-head">
            <input
              type="text"
              placeholder={t("column_name")}
              value={f.name}
              onChange={(e) => set(i, { name: e.target.value })}
            />
            <button className="danger" onClick={() => onChange(fields.filter((_, j) => j !== i))}>
              {t("remove")}
            </button>
          </div>
          <div className="fields">
            <label className="field">
              <span>by</span>
              <select value={f.by ?? "css"} onChange={(e) => set(i, { by: e.target.value })}>
                {["text", "css", "role"].map((o) => (
                  <option key={o}>{o}</option>
                ))}
              </select>
            </label>
            <label className="field">
              <span>value</span>
              <input type="text" value={f.value ?? ""} onChange={(e) => set(i, { value: e.target.value })} />
            </label>
            <label className="field">
              <span>role</span>
              <input type="text" value={f.role ?? ""} onChange={(e) => set(i, { role: e.target.value })} />
            </label>
          </div>
        </div>
      ))}
      <button className="secondary" onClick={() => onChange([...fields, { name: "", by: "css", value: "" }])}>
        {t("add_field")}
      </button>
    </div>
  );
}