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

import { CarouselHero, CarouselHeroItem } from "../";

const slides = (
  <>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+1">
      <h2>Slide 1</h2>
      <p>First slide content</p>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+2">
      <h2>Slide 2</h2>
      <p>Second slide content</p>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+3">
      <h2>Slide 3</h2>
      <p>Third slide content</p>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+4">
      <h2>Slide 4</h2>
      <p>Fourth slide content</p>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+5">
      <h2>Slide 5</h2>
      <p>Fifth slide content</p>
    </CarouselHeroItem>
  </>
);

const tabs = [
  { label: "Motorola Edge 50 Fusion" },
  { label: "3 mesiace zadarmo" },
  { label: "Nekonečné dáta" },
  { label: "iPhone16 Pro" },
  { label: "HONOR 200" },
];

async function getCarouselState() {
  return page.evaluate(() => {
    const element = document.getElementById("carousel-hero-regression");
    const instance = element?.ODS_CarouselHero?.instance;

    return {
      activeIndex: instance?.activeIndex,
      realIndex: instance?.realIndex,
      transform: instance?.wrapperEl?.style.transform ?? "",
    };
  });
}

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

  test("wraps and keeps adjacent tab navigation short", async () => {
    render(
      <CarouselHero id="carousel-hero-regression" tabs={tabs}>
        {slides}
      </CarouselHero>,
    );

    await expect(page.getByRole("tab", { name: "HONOR 200" })).toBeVisible();

    await page.getByRole("tab", { name: "HONOR 200" }).click();
    await page.waitForTimeout(500);

    let state = await getCarouselState();
    expect(state.realIndex).toBe(4);
    expect(state.activeIndex).toBe(4);

    await page.getByRole("button", { name: "Nasledujúci snímok" }).click();
    await page.waitForTimeout(500);

    state = await getCarouselState();
    expect(state.realIndex).toBe(0);
    expect(state.activeIndex).toBe(0);

    await page.getByRole("tab", { name: "3 mesiace zadarmo" }).click();
    await page.waitForTimeout(500);

    state = await getCarouselState();
    expect(state.realIndex).toBe(1);
    expect(state.activeIndex).toBe(1);
    expect(state.transform).toContain("translate3d");
    expect(state.transform).toContain("-");
  });
});