import { render } from "@testing-library/react";
import { axe } from "vitest-axe";

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

const basicExample = (
  <CarouselHero>
    <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>
  </CarouselHero>
);

const exampleWithTabs = (
  <CarouselHero
    tabs={[
      { label: "First Tab" },
      { label: "Second Tab" },
      { label: "Third Tab" },
    ]}
  >
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+1">
      <h2>Slide 1</h2>
      <p>First slide with tabs</p>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+2">
      <h2>Slide 2</h2>
      <p>Second slide with tabs</p>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+3">
      <h2>Slide 3</h2>
      <p>Third slide with tabs</p>
    </CarouselHeroItem>
  </CarouselHero>
);

const exampleWithAutoplay = (
  <CarouselHero
    enableAutoplay
    interval={3000}
    tabs={[{ label: "Auto Tab 1" }, { label: "Auto Tab 2" }]}
  >
    <CarouselHeroItem image="https://placehold.co/720x560?text=Auto+Slide+1">
      <h2>Auto Slide 1</h2>
      <p>Autoplay slide 1</p>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Auto+Slide+2">
      <h2>Auto Slide 2</h2>
      <p>Autoplay slide 2</p>
    </CarouselHeroItem>
  </CarouselHero>
);

const exampleWithComplexContent = (
  <CarouselHero
    enableAutoplay
    tabs={[{ label: "Product 1" }, { label: "Product 2" }]}
    interval={5000}
    swiperOptions={{ speed: 300 }}
  >
    <CarouselHeroItem image="https://placehold.co/720x560?text=Product+1">
      <h2>Premium Product</h2>
      <p>Discover our premium product line with advanced features.</p>
      <button type="button">Learn More</button>
      <button type="button">Buy Now</button>
    </CarouselHeroItem>
    <CarouselHeroItem image="https://placehold.co/720x560?text=Product+2">
      <h2>Special Offer</h2>
      <p>Limited time offer - get 50% off on selected items.</p>
      <ul>
        <li>Free shipping</li>
        <li>30-day return policy</li>
        <li>Extended warranty</li>
      </ul>
      <button type="button">View Details</button>
    </CarouselHeroItem>
  </CarouselHero>
);

describe("CarouselHero conformance", () => {
  it("is valid html", () => {
    const { container } = render(basicExample);
    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
  });

  it("is accessible", async () => {
    const { container } = render(basicExample);
    expect(
      await axe(container, {
        rules: { "aria-required-children": { enabled: false } },
      }),
    ).toHaveNoViolations();
  });
});

describe("CarouselHero with tabs conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithTabs);
    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
  });

  it("is accessible", async () => {
    const { container } = render(exampleWithTabs);
    expect(
      await axe(container, {
        rules: { "aria-required-children": { enabled: false } },
      }),
    ).toHaveNoViolations();
  });
});

describe("CarouselHero with autoplay conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithAutoplay);
    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
  });

  it("is accessible", async () => {
    const { container } = render(exampleWithAutoplay);
    expect(
      await axe(container, {
        rules: { "aria-required-children": { enabled: false } },
      }),
    ).toHaveNoViolations();
  });
});

describe("CarouselHero with complex content conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithComplexContent);
    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
  });

  it("is accessible", async () => {
    const { container } = render(exampleWithComplexContent);
    expect(
      await axe(container, {
        rules: { "aria-required-children": { enabled: false } },
      }),
    ).toHaveNoViolations();
  });
});