import type { Condition } from "../lib/api";
import type { Schema } from "../lib/schema";
import { conditionKind, fieldLabel } from "../lib/schema";
import type { Lang, T } from "../lib/i18n";
import { Fields } from "./Fields";

interface Props {
  condition: Condition;
  schema: Schema;
  lang: Lang;
  t: T;
  showScope: boolean;
  onChange: (c: Condition) => void;
}

export function ConditionEditor({ condition, schema, lang, t, showScope, onChange }: Props) {
  const spec = conditionKind(schema, condition.kind);
  return (
    <div className="condition">
      <label className="field">
        <span>{t("condition")}</span>
        <select
          value={condition.kind}
          onChange={(e) => onChange({ kind: e.target.value })}
        >
          {schema.condition_kinds.map((c) => (
            <option key={c.kind} value={c.kind}>
              {fieldLabel(c, lang)}
            </option>
          ))}
        </select>
      </label>
      {spec && (
        <Fields
          values={condition}
          fields={spec.fields}
          lang={lang}
          showScope={showScope}
          onChange={(patch) => onChange({ ...condition, ...patch })}
        />
      )}
    </div>
  );
}