// <ClassificationEditor> — the fields of one review classification: a name, a
// description (the prompt the model answers), which answer passes, and how
// certain the model has to be for its answer to count.
import { Button } from "../../ui/button/Button.js";
import { SelectField } from "../../ui/select-field/SelectField.js";
import { TextAreaField } from "../../ui/text-area-field/TextAreaField.js";
import { TextField } from "../../ui/text-field/TextField.js";
import type { ClassificationDraft, Polarity } from "./TryOutTypes.js";
import "./ReviewTryOutPage.css";

const POLARITY_OPTIONS = [
  { value: "positive", label: "positive — the PR should match" },
  { value: "negative", label: "negative — the PR should not match" },
];

export function ClassificationEditor({
  draft,
  onChange,
  onRemove,
}: {
  draft: ClassificationDraft;
  onChange: (next: ClassificationDraft) => void;
  /** Absent when this is the only classification: one is the minimum. */
  onRemove?: () => void;
}) {
  const id = `tryout-${draft.key}`;
  return (
    <div class="ui-tryout-classification">
      <TextField
        id={`${id}-name`}
        label="name"
        value={draft.name}
        placeholder="e.g. datetime"
        onInput={(name) => onChange({ ...draft, name })}
      />
      <TextAreaField
        id={`${id}-description`}
        label="description"
        value={draft.description}
        rows={4}
        placeholder="what to look for in the PR, e.g. does it add a naive datetime?"
        onInput={(description) => onChange({ ...draft, description })}
      />
      <div class="ui-tryout-classification-row">
        <SelectField
          id={`${id}-polarity`}
          label="polarity"
          value={draft.polarity}
          options={POLARITY_OPTIONS}
          onChange={(polarity) =>
            onChange({ ...draft, polarity: polarity as Polarity })
          }
        />
        <TextField
          id={`${id}-threshold`}
          label="threshold (0–100)"
          value={draft.threshold}
          pattern="[0-9]+"
          onInput={(threshold) => onChange({ ...draft, threshold })}
        />
        {onRemove ? <Button onClick={onRemove}>remove</Button> : null}
      </div>
    </div>
  );
}