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

export function RouteMetricForm({ 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="Metric">
        <Select
          value={(c.metric as string) ?? ''}
          onChange={(e) => patch({ metric: e.target.value })}
          options={ROUTE_METRIC_OPTIONS}
        />
      </FormField>
      <FormField label="Comparator">
        <Select
          value={(c.comparator as string) ?? 'GT'}
          onChange={(e) => patch({ comparator: e.target.value })}
          options={COMPARATOR_OPTIONS}
        />
      </FormField>
      <FormField label="Threshold">
        <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) ?? 300}
          onChange={(e) => patch({ windowSeconds: Number(e.target.value) })}
        />
      </FormField>
    </>
  );
}
