import { render } from "@testing-library/react";
import { Image } from "../../Image";
import { CarouselPromotions } from "../CarouselPromotions";
import { CarouselPromotionsItem } from "../CarouselPromotionsItem";

describe("rendering CarouselPromotions", () => {
  describe("initial state", () => {
    it("has default class carousel", () => {
      const { getByTestId } = render(
        <CarouselPromotions data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("carousel-promotions");
    });
    it("has default class carousel-promotions__viewport-wrapper", () => {
      const { container } = render(<CarouselPromotions />);
      expect(
        container.getElementsByClassName(
          "carousel-promotions__viewport-wrapper",
        ).length,
      ).toBe(1);
    });
    it("has default class carousel-promotions__viewport", () => {
      const { container } = render(<CarouselPromotions />);
      expect(
        container.getElementsByClassName("carousel-promotions__viewport")
          .length,
      ).toBe(1);
    });
    it("has default class carousel-promotions__track", () => {
      const { container } = render(<CarouselPromotions />);
      expect(
        container.getElementsByClassName("carousel-promotions__track").length,
      ).toBe(1);
    });
    it("has default class carousel-promotions__pagination", () => {
      const { container } = render(<CarouselPromotions />);
      expect(
        container.getElementsByClassName("carousel-promotions__pagination")
          .length,
      ).toBe(1);
    });
  });

  describe("passed props", () => {
    const items = (
      <>
        <CarouselPromotionsItem
          image={
            <Image
              src={`https://placehold.co/800x150?text=slide`}
              alt="Image"
            />
          }
          title="Akcia za vernosť."
          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
        />
        <CarouselPromotionsItem
          image={
            <Image
              src={`https://placehold.co/800x150?text=slide`}
              alt="Image"
            />
          }
          title="Akcia za vernosť."
          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
        />
        <CarouselPromotionsItem
          image={
            <Image
              src={`https://placehold.co/800x150?text=slide`}
              alt="Image"
            />
          }
          title="Akcia za vernosť."
          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
        />
      </>
    );

    it("has pagination container (buttons are rendered by Swiper after initialization)", () => {
      const { container } = render(
        <CarouselPromotions>{items}</CarouselPromotions>,
      );
      // Pagination buttons are dynamically created by Swiper.js after initialization
      // so we just verify the pagination container exists
      expect(
        container.querySelector(".carousel-promotions__pagination"),
      ).toBeInTheDocument();
    });

    it("passes swiperOptions as data-swiper-options attribute", () => {
      const swiperOptions = { slidesPerView: 2 };
      const { getByTestId } = render(
        <CarouselPromotions data-testid="test-id" swiperOptions={swiperOptions}>
          {items}
        </CarouselPromotions>,
      );
      expect(getByTestId("test-id")).toHaveAttribute(
        "data-swiper-options",
        JSON.stringify(swiperOptions),
      );
    });

    it("does not set data-swiper-options attribute when swiperOptions prop is not provided", () => {
      const { getByTestId } = render(
        <CarouselPromotions data-testid="test-id">{items}</CarouselPromotions>,
      );
      expect(getByTestId("test-id").hasAttribute("data-swiper-options")).toBe(
        false,
      );
    });
  });

  describe("Swiper integration", () => {
    const items = (
      <>
        <CarouselPromotionsItem
          image={
            <Image
              src={`https://placehold.co/800x150?text=slide`}
              alt="Image"
            />
          }
          title="Akcia za vernosť."
          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
        />
        <CarouselPromotionsItem
          image={
            <Image
              src={`https://placehold.co/800x150?text=slide`}
              alt="Image"
            />
          }
          title="Akcia za vernosť."
          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
        />
      </>
    );

    it("track element uses carousel-promotions__track class which maps to swiper-wrapper", () => {
      const { container } = render(
        <CarouselPromotions>{items}</CarouselPromotions>,
      );
      expect(
        container.querySelector(".carousel-promotions__track"),
      ).toBeInTheDocument();
    });

    it("slide elements use carousel-promotions__slide class which maps to swiper-slide", () => {
      const { container } = render(
        <CarouselPromotions>{items}</CarouselPromotions>,
      );
      const slides = container.getElementsByClassName(
        "carousel-promotions__slide",
      );
      for (let i = 0; i < slides.length; i++) {
        expect(slides[i]).toHaveClass("carousel-promotions__slide");
      }
    });

    it("viewport element is used as Swiper container", () => {
      const { container } = render(
        <CarouselPromotions>{items}</CarouselPromotions>,
      );
      expect(
        container.querySelector(".carousel-promotions__viewport"),
      ).toBeInTheDocument();
    });

    it("pagination container has proper accessibility attributes", () => {
      const { container } = render(
        <CarouselPromotions>{items}</CarouselPromotions>,
      );
      const pagination = container.querySelector(
        ".carousel-promotions__pagination",
      );
      expect(pagination).toHaveAttribute("role", "tablist");
    });

    it("pagination container includes rendered buttons", () => {
      const { container } = render(
        <CarouselPromotions>{items}</CarouselPromotions>,
      );
      const pagination = container.querySelector(
        ".carousel-promotions__pagination",
      );
      expect(pagination.children.length).toBeGreaterThan(0);
    });
  });

  describe("autoplay functionality", () => {
    const items = (
      <>
        <CarouselPromotionsItem
          image={
            <Image
              src={`https://placehold.co/800x150?text=slide`}
              alt="Image"
            />
          }
          title="Akcia za vernosť."
          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
        />
      </>
    );

    it("adds data-interval attribute when provided", () => {
      const { getByTestId } = render(
        <CarouselPromotions data-testid="test-id" data-interval={5000}>
          {items}
        </CarouselPromotions>,
      );
      expect(getByTestId("test-id")).toHaveAttribute("data-interval", "5000");
    });

    it("adds data-carousel-promotions attribute for component identification", () => {
      const { getByTestId } = render(
        <CarouselPromotions data-testid="test-id">{items}</CarouselPromotions>,
      );
      expect(getByTestId("test-id")).toHaveAttribute(
        "data-carousel-promotions",
      );
    });
  });
});