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

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

describe("rendering CarouselHeroItem", () => {
  describe("initial state", () => {
    it("has default class carousel-hero__slide", () => {
      const { getByTestId } = render(
        <CarouselHeroItem
          data-testid="test-id"
          image="https://placehold.co/720x560"
        />,
      );
      expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
    });

    it("renders slide content container", () => {
      const { container } = render(
        <CarouselHeroItem image="https://placehold.co/720x560" />,
      );
      expect(
        container.getElementsByClassName("carousel-hero__slide-content").length,
      ).toBe(1);
    });

    it("renders Container wrapper with proper class", () => {
      const { container } = render(
        <CarouselHeroItem image="https://placehold.co/720x560" />,
      );
      expect(
        container.getElementsByClassName("carousel-hero__slide-container")
          .length,
      ).toBe(1);
    });

    it("renders image with proper attributes", () => {
      const imageUrl = "https://placehold.co/720x560";
      const { container } = render(<CarouselHeroItem image={imageUrl} />);

      const imageElement = container.querySelector(
        ".carousel-hero__slide-image",
      );
      expect(imageElement).toBeInTheDocument();
      expect(imageElement).toHaveAttribute("src", imageUrl);
      expect(imageElement).toHaveAttribute("alt", "Obrázok");
    });
  });

  describe("passed props", () => {
    it("renders children content", () => {
      const { getByText } = render(
        <CarouselHeroItem image="https://placehold.co/720x560">
          <p>Test content</p>
          <button>Test button</button>
        </CarouselHeroItem>,
      );
      expect(getByText("Test content")).toBeInTheDocument();
      expect(getByText("Test button")).toBeInTheDocument();
    });

    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <CarouselHeroItem
          data-testid="test-id"
          className="test-class"
          image="https://placehold.co/720x560"
        />,
      );
      expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });

    it("passes through other HTML attributes", () => {
      const { getByTestId } = render(
        <CarouselHeroItem
          data-testid="test-id"
          id="custom-id"
          role="tabpanel"
          image="https://placehold.co/720x560"
        />,
      );
      expect(getByTestId("test-id")).toHaveAttribute("id", "custom-id");
      expect(getByTestId("test-id")).toHaveAttribute("role", "tabpanel");
    });

    it("renders with different image source", () => {
      const customImage = "https://example.com/custom-image.jpg";
      const { container } = render(<CarouselHeroItem image={customImage} />);

      const imageElement = container.querySelector(
        ".carousel-hero__slide-image",
      );
      expect(imageElement).toHaveAttribute("src", customImage);
      expect(imageElement).toHaveAttribute("alt", "Obrázok");
    });

    it("renders children in proper content container", () => {
      const { container } = render(
        <CarouselHeroItem image="https://placehold.co/720x560">
          <p data-testid="child-content">Child content</p>
        </CarouselHeroItem>,
      );

      const contentContainer = container.querySelector(
        ".carousel-hero__slide-content",
      );
      const childContent = container.querySelector(
        "[data-testid='child-content']",
      );

      expect(contentContainer).toContainElement(childContent);
    });

    it("maintains proper DOM structure", () => {
      const { container } = render(
        <CarouselHeroItem image="https://placehold.co/720x560">
          <h2>Title</h2>
          <p>Content</p>
        </CarouselHeroItem>,
      );

      const slide = container.querySelector(".carousel-hero__slide");
      const slideContainer = container.querySelector(
        ".carousel-hero__slide-container",
      );
      const slideContent = container.querySelector(
        ".carousel-hero__slide-content",
      );
      const slideImage = container.querySelector(".carousel-hero__slide-image");

      // Check that slide contains the Container wrapper
      expect(slide).toContainElement(slideContainer);

      // Check that Container wrapper contains both content and image
      expect(slideContainer).toContainElement(slideContent);
      expect(slideContainer).toContainElement(slideImage);

      // Check that slide content contains children
      expect(slideContent).toHaveTextContent("Title");
      expect(slideContent).toHaveTextContent("Content");
    });
  });
});