import { screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, describe, expect, it } from "vitest";
import { DEFAULT_PREFERENCES, usePreferences } from "../src/state/preferences";
import { fakeApi, renderApp, samplePlayerState, sampleTutorialBoard } from "./render";

const owner = () =>
  samplePlayerState({
    tutorial: null,
    company: { id: "c", name: "Kell Haulage", credits: 9000, loanBalance: 0 },
  });

describe("company settings (Step 10K.7)", () => {
  afterEach(() => usePreferences.getState().set(DEFAULT_PREFERENCES));

  it("renames in place, checking the name as you type", async () => {
    const api = fakeApi({
      getPlayerState: owner,
      renameCompany: ({ name }) => ({ company: { ...owner().company, name } }),
    });
    renderApp(api, "/settings");
    const company = await screen.findByRole("region", { name: "Company" });
    await userEvent.click(within(company).getByRole("button", { name: "Rename" }));
    const input = within(company).getByRole("textbox");
    await userEvent.clear(input);
    await userEvent.type(input, "Ab");
    expect(within(company).getByText("At least 3 characters")).toBeInTheDocument();
    expect(within(company).getByRole("button", { name: "Save" })).toBeDisabled();

    await userEvent.type(input, "le Freight  ");
    await userEvent.click(within(company).getByRole("button", { name: "Save" }));
    await waitFor(() =>
      expect(api.call).toHaveBeenCalledWith("renameCompany", { name: "Able Freight" }),
    );
  });

  it("starts over only after the exact company name is typed, then opens the tutorial", async () => {
    let reset = false;
    const api = fakeApi({
      getPlayerState: () => (reset ? samplePlayerState() : owner()),
      getTutorialBoard: () => sampleTutorialBoard(),
      newCompany: () => {
        reset = true;
        return samplePlayerState();
      },
    });
    usePreferences.getState().dismissTip("tutorial-intro");
    renderApp(api, "/settings");
    await userEvent.click(await screen.findByRole("button", { name: "Start a new company" }));
    const sheet = screen.getByRole("dialog", { name: "Start a new company?" });
    expect(sheet).toHaveTextContent("Everything in Kell Haulage will be lost");
    const confirm = within(sheet).getByRole("button", { name: "Start over" });
    expect(confirm).toBeDisabled();

    const input = within(sheet).getByRole("textbox");
    await userEvent.type(input, "kell haulage");
    expect(confirm).toBeDisabled();
    await userEvent.clear(input);
    await userEvent.type(input, "Kell Haulage");
    expect(confirm).toBeEnabled();

    await userEvent.click(confirm);
    await waitFor(() => expect(api.call).toHaveBeenCalledWith("newCompany", {}));
    expect(await screen.findByRole("heading", { level: 1, name: "Jobs" })).toBeInTheDocument();
    expect(await screen.findByLabelText("Intro")).toBeInTheDocument();
  });
});