import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SchemaColumnsDialog } from "./SchemaColumnsDialog";
import type { SchemaTable } from "../api/types";

const table: SchemaTable = {
  id: "t-pat",
  name: "dim_patient",
  kind: "promote",
  columns: [
    { name: "cod_paz", description: "Codice paziente", suggested: true },
    { name: "nome", description: "Nome", suggested: false },
  ],
};

test("selected column renders bold; unselected is normal; toggle fires", async () => {
  const onToggle = vi.fn();
  render(
    <SchemaColumnsDialog
      table={table}
      open
      readOnly={false}
      selected={new Set(["cod_paz"])}
      onToggle={onToggle}
      onClose={() => {}}
    />
  );
  expect(screen.getByText("cod_paz").className).toContain("font-bold");
  expect(screen.getByText("nome").className).not.toContain("font-bold");
  await userEvent.click(screen.getByRole("checkbox", { name: "nome" }));
  expect(onToggle).toHaveBeenCalledWith("nome");
});

test("readOnly renders no checkboxes and no bold", () => {
  render(
    <SchemaColumnsDialog
      table={table}
      open
      readOnly
      selected={new Set()}
      onToggle={() => {}}
      onClose={() => {}}
    />
  );
  expect(screen.queryByRole("checkbox")).toBeNull();
  expect(screen.getByText("cod_paz")).toBeInTheDocument();
  expect(screen.getByText("cod_paz").className).not.toContain("font-bold");
});