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

export function LogPatternForm({ form, setForm }: { form: FormState; setForm: (f: FormState) => void }) {
  const c = form.condition as Record<string, unknown>;
  const patch = (p: Record<string, unknown>) =>
    setForm({ ...form, condition: { ...(form.condition as Record<string, unknown>), ...p } as FormState['condition'] });

  return (
    <>
      <FormField label="Level">
        <Select
          value={(c.level as string) ?? 'ERROR'}
          onChange={(e) => patch({ level: e.target.value })}
          options={[
            { value: 'ERROR', label: 'ERROR' },
            { value: 'WARN', label: 'WARN' },
            { value: 'INFO', label: 'INFO' },
          ]}
        />
      </FormField>
      <FormField label="Logger (substring, optional)">
        <Input
          value={(c.logger as string | undefined) ?? ''}
          onChange={(e) => patch({ logger: e.target.value || undefined })}
        />
      </FormField>
      <FormField label="Pattern (regex)">
        <Input
          value={(c.pattern as string | undefined) ?? ''}
          onChange={(e) => patch({ pattern: e.target.value })}
        />
      </FormField>
      <FormField label="Threshold (matches)">
        <Input
          type="number"
          value={(c.threshold as number | undefined) ?? ''}
          onChange={(e) => patch({ threshold: Number(e.target.value) })}
        />
      </FormField>
      <FormField label="Window (seconds)">
        <Input
          type="number"
          value={(c.windowSeconds as number | undefined) ?? 900}
          onChange={(e) => patch({ windowSeconds: Number(e.target.value) })}
        />
      </FormField>
    </>
  );
}
