import "@testing-library/jest-dom/vitest";
import { useLayoutEffect } from "react";
import userEvent from "@testing-library/user-event";
import { afterEach, describe, expect, it } from "vitest";
import { SetupQuestionsScreen } from "../../app/(app)/create/screens/select/SetupQuestionsScreen";
import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
import type { CreateFlowState } from "../../app/(app)/create/types";
import { TRAIT_KEYS } from "../../lib/create/deckTypes";
import messages from "../../messages/en/index";
import {
  cleanup,
  renderWithProviders as render,
  screen,
} from "../utils/test-utils";

const copy = messages.create.community.setupQuestions;

function ScreenWithState({ initial }: { initial: CreateFlowState }) {
  const { replaceState } = useCreateFlow();
  useLayoutEffect(() => {
    replaceState(initial);
  }, [replaceState, initial]);
  return <SetupQuestionsScreen />;
}

afterEach(() => {
  cleanup();
});

describe("Create flow setup-questions page", () => {
  it("renders the six questions off by default with a help line under each", () => {
    render(<SetupQuestionsScreen />);

    expect(
      screen.getByRole("heading", { name: copy.title }),
    ).toBeInTheDocument();
    expect(screen.getByText(copy.description)).toBeInTheDocument();

    for (const question of copy.questions) {
      const checkbox = screen.getByRole("checkbox", { name: question.label });
      expect(checkbox).toHaveAttribute("aria-checked", "false");
      expect(screen.getByText(question.help)).toBeInTheDocument();
    }
    expect(copy.questions).toHaveLength(6);
    expect(copy.questions.map((question) => question.id)).toEqual([
      ...TRAIT_KEYS,
    ]);
  });

  it("ticks a question from the box or the help line", async () => {
    const user = userEvent.setup();
    render(<SetupQuestionsScreen />);

    await user.click(
      screen.getByRole("checkbox", { name: copy.questions[2].label }),
    );
    expect(
      screen.getByRole("checkbox", { name: copy.questions[2].label }),
    ).toHaveAttribute("aria-checked", "true");

    await user.click(screen.getByText(copy.questions[0].help));
    expect(
      screen.getByRole("checkbox", { name: copy.questions[0].label }),
    ).toHaveAttribute("aria-checked", "true");
  });

  it("restores ticked answers from the draft", () => {
    render(
      <ScreenWithState
        initial={{ setupTraits: { employer: true, sponsor: false } }}
      />,
    );

    expect(
      screen.getByRole("checkbox", { name: copy.questions[2].label }),
    ).toHaveAttribute("aria-checked", "true");
    expect(
      screen.getByRole("checkbox", { name: copy.questions[3].label }),
    ).toHaveAttribute("aria-checked", "false");
  });

  it("does not ask about police, immigration enforcement, or protest", () => {
    const blob = `${copy.title} ${copy.description} ${copy.questions
      .map((question) => `${question.label} ${question.help}`)
      .join(" ")}`.toLowerCase();
    expect(blob).not.toMatch(/police/);
    expect(blob).not.toMatch(/immigration/);
    expect(blob).not.toMatch(/protest/);
  });
});