import { FormField } from '@cameleer/design-system';
import type { FormState } from '../form-state';

const OPTIONS = ['FAILED', 'DEGRADED'] as const;

export function DeploymentStateForm({ form, setForm }: { form: FormState; setForm: (f: FormState) => void }) {
  const c = form.condition as Record<string, unknown>;
  const states: string[] = (c.states as string[] | undefined) ?? [];
  const toggle = (s: string) => {
    const next = states.includes(s) ? states.filter((x) => x !== s) : [...states, s];
    setForm({ ...form, condition: { ...(form.condition as Record<string, unknown>), states: next } as FormState['condition'] });
  };

  return (
    <FormField label="Fire when deployment is in states">
      <div style={{ display: 'flex', gap: 12 }}>
        {OPTIONS.map((s) => (
          <label key={s} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <input type="checkbox" checked={states.includes(s)} onChange={() => toggle(s)} />
            {s}
          </label>
        ))}
      </div>
    </FormField>
  );
}
