import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { ReservedControls } from "./ReservedControls";

test("back and exit fire immediately with no text", async () => {
  const onControl = vi.fn();
  render(<ReservedControls reserved={["back", "exit"]} onControl={onControl} />);
  await userEvent.click(screen.getByRole("button", { name: /go back/i }));
  expect(onControl).toHaveBeenCalledWith("back");
  await userEvent.click(screen.getByRole("button", { name: /^exit$/i }));
  expect(onControl).toHaveBeenCalledWith("exit");
});

test("other reveals a textarea and emits freetext with the typed text", async () => {
  const onControl = vi.fn();
  render(<ReservedControls reserved={["other"]} onControl={onControl} />);
  await userEvent.click(screen.getByRole("button", { name: /other — specify/i }));
  // clicking Other does NOT emit a control yet — it reveals the input
  expect(onControl).not.toHaveBeenCalled();
  await userEvent.type(screen.getByRole("textbox"), "usa la tabella X");
  await userEvent.click(screen.getByRole("button", { name: /send/i }));
  expect(onControl).toHaveBeenCalledWith("freetext", "usa la tabella X");
});

test("Send stays disabled until non-whitespace text is entered", async () => {
  const onControl = vi.fn();
  render(<ReservedControls reserved={["other"]} onControl={onControl} />);
  await userEvent.click(screen.getByRole("button", { name: /other — specify/i }));
  const send = screen.getByRole("button", { name: /send/i });
  expect(send).toBeDisabled();
  await userEvent.type(screen.getByRole("textbox"), "   ");
  expect(send).toBeDisabled();
  await userEvent.click(send);
  expect(onControl).not.toHaveBeenCalled();
  await userEvent.type(screen.getByRole("textbox"), "ok");
  expect(send).not.toBeDisabled();
});