import { useState } from "react";
import { Button } from "~/ui/Button";
import { TextAreaField } from "~/ui/Field";

type Props = {
  pending: boolean;
  /** Current text of the selected lines, used to prefill a ```suggestion block. Null when not suggestible. */
  suggestionSeed: string | null;
  rangeLabel: string | null;
  onSubmit: (body: string) => void;
  onCancel: () => void;
  onSingle: (body: string) => void;
};

export function ReviewComposer({ pending, suggestionSeed, rangeLabel, onSubmit, onCancel, onSingle }: Props) {
  const [body, setBody] = useState("");
  return (
    <div className="m-2 space-y-2 rounded-md border border-accent-600/60 bg-kumo-canvas p-2 font-sans">
      <div className="flex items-center gap-2 text-xs text-kumo-subtle">
        {rangeLabel && <span className="font-mono">{rangeLabel}</span>}
        {suggestionSeed !== null && (
          <button
            type="button"
            className="ml-auto hover:text-accent-400"
            onClick={() =>
              setBody((current) => `${current}${current ? "\n" : ""}\`\`\`suggestion\n${suggestionSeed}\n\`\`\`\n`)
            }
          >
            Insert suggestion
          </button>
        )}
      </div>
      <TextAreaField
        label="Review comment"
        value={body}
        onChange={(event) => setBody(event.target.value)}
        rows={4}
        className="font-mono"
        autoFocus
      />
      <div className="flex justify-end gap-2">
        <Button size="sm" variant="ghost" onClick={onCancel}>
          Cancel
        </Button>
        <Button size="sm" disabled={!body.trim()} pending={pending} onClick={() => onSingle(body)}>
          Add single comment
        </Button>
        <Button size="sm" variant="primary" disabled={!body.trim()} onClick={() => onSubmit(body)}>
          Start a review
        </Button>
      </div>
    </div>
  );
}