import { beforeEach, describe, expect, test } from "vitest";
import { page } from "vitest/browser";
import { render } from "vitest-browser-react";
import { Button } from "../../Button";
import { Alert } from "../";

describe("Alert visual regression", () => {
  beforeEach(async () => {
    await page.viewport(1280, 720);
  });

  test("Preview: title", async () => {
    render(
      <Alert data-testid="alert-title" title="Toto je jednoduchá sprava" />,
    );

    await expect(page.getByTestId("alert-title")).toMatchScreenshot(
      "alert-preview-title",
    );
  });

  test("Preview: title and description", async () => {
    render(
      <Alert
        data-testid="alert-title-description"
        title="Dobre vediet!"
        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
      />,
    );

    await expect(page.getByTestId("alert-title-description")).toMatchScreenshot(
      "alert-preview-title-description",
    );
  });

  test("Preview: title and buttons", async () => {
    render(
      <Alert
        data-testid="alert-title-buttons"
        title="Prosim prihlaste sa."
        actionButtons={[
          <Button key="login">Prihlasit sa</Button>,
          <Button key="hide">Skryt</Button>,
        ]}
      />,
    );

    await expect(page.getByTestId("alert-title-buttons")).toMatchScreenshot(
      "alert-preview-title-buttons",
    );
  });

  test("Preview: title, description and buttons", async () => {
    render(
      <Alert
        data-testid="alert-title-description-buttons"
        title="Prihlasit sa je jednoduche a rozumne"
        description="Napr. prihlaseni pouzivatelia vidia krajsie ceny."
        actionButtons={<Button>Prihlasit sa</Button>}
      />,
    );

    await expect(
      page.getByTestId("alert-title-description-buttons"),
    ).toMatchScreenshot("alert-preview-title-description-buttons");
  });

  test("Preview: success type", async () => {
    render(
      <Alert
        data-testid="alert-success"
        type="success"
        title="Vyborne. Vsetko prebehlo rychlo a hladko"
      />,
    );

    await expect(page.getByTestId("alert-success")).toMatchScreenshot(
      "alert-preview-success",
    );
  });

  test("Preview: warning type", async () => {
    render(
      <Alert
        data-testid="alert-warning"
        type="warning"
        title="Na toto si daj pozor!"
      />,
    );

    await expect(page.getByTestId("alert-warning")).toMatchScreenshot(
      "alert-preview-warning",
    );
  });

  test("Preview: danger type", async () => {
    render(
      <Alert data-testid="alert-danger" type="danger" title="Stala sa chyba" />,
    );

    await expect(page.getByTestId("alert-danger")).toMatchScreenshot(
      "alert-preview-danger",
    );
  });

  test("Preview: custom title renderer", async () => {
    render(
      <Alert
        data-testid="alert-custom-title"
        title="Prihlasit sa je jednoduche a rozumne"
        renderTitle={(props) => (
          <h3 className="alert__title mb-medium">{props.title}</h3>
        )}
        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
      />,
    );

    await expect(page.getByTestId("alert-custom-title")).toMatchScreenshot(
      "alert-preview-custom-title",
    );
  });

  test("Preview: full width", async () => {
    render(
      <Alert
        data-testid="alert-full-width"
        isFullWidth
        title="Dobre vediet!"
        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
      />,
    );

    await expect(page.getByTestId("alert-full-width")).toMatchScreenshot(
      "alert-preview-full-width",
    );
  });
});