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

import { BodyBanner } from "../";

describe("rendering BodyBanner", () => {
  describe("initial state", () => {
    it("has default className body-banner", () => {
      const { container } = render(<BodyBanner />);
      expect(container.querySelector(".body-banner")).toBeInTheDocument();
      expect(container.querySelector(".body-banner")).toHaveClass(
        "body-banner",
      );
    });
  });

  describe("sizes", () => {
    it("doesn't have body-banner--small class when size is small (default)", () => {
      const { container } = render(<BodyBanner />);
      expect(container.querySelector(".body-banner")).not.toHaveClass(
        "body-banner--small",
      );
    });

    it("has body-banner--large class when size is large", () => {
      const { container } = render(<BodyBanner size="large" />);
      expect(container.querySelector(".body-banner")).toHaveClass(
        "body-banner--large",
      );
    });
  });

  describe("colors", () => {
    it("doesn't have color class when color is background-primary (default)", () => {
      const { container } = render(<BodyBanner color="background-primary" />);
      expect(container.querySelector(".body-banner")).not.toHaveClass(
        "background-primary",
      );
    });

    it("has background-primary class by default (when no color specified)", () => {
      const { container } = render(<BodyBanner />);
      expect(container.querySelector(".body-banner")).toHaveClass(
        "body-banner",
      );
    });

    it("has background-accent class when color is background-accent", () => {
      const { container } = render(<BodyBanner color="background-accent" />);
      expect(container.querySelector(".body-banner")).toHaveClass(
        "background-accent",
      );
    });

    it("has surface-subtle class when color is surface-subtle", () => {
      const { container } = render(<BodyBanner color="surface-subtle" />);
      expect(container.querySelector(".body-banner")).toHaveClass(
        "surface-subtle",
      );
    });

    it("supports all available colors", () => {
      const colors = [
        "background-primary",
        "background-accent",
        "surface-subtle",
      ];

      colors.forEach((color) => {
        const { container } = render(<BodyBanner color={color} />);

        if (color !== "background-primary") {
          expect(container.querySelector(".body-banner")).toHaveClass(color);
        }
      });
    });
  });

  describe("children and button", () => {
    it("renders children content", () => {
      const { getByText } = render(
        <BodyBanner>
          <h3>Test Title</h3>
          <p>Test Description</p>
        </BodyBanner>,
      );
      expect(getByText("Test Title")).toBeInTheDocument();
      expect(getByText("Test Description")).toBeInTheDocument();
    });

    it("renders button text", () => {
      const { getByText } = render(<BodyBanner buttonText="Learn More" />);
      expect(getByText("Learn More")).toBeInTheDocument();
    });

    it("renders both children and button", () => {
      const { getByText } = render(
        <BodyBanner buttonText="Click Me">
          <h3>Content</h3>
        </BodyBanner>,
      );
      expect(getByText("Content")).toBeInTheDocument();
      expect(getByText("Click Me")).toBeInTheDocument();
    });
  });

  describe("image", () => {
    it("renders image when image prop is provided", () => {
      const { getByRole } = render(
        <BodyBanner
          image={<img src="https://example.com/image.jpg" alt="Test image" />}
        />,
      );
      const image = getByRole("img");
      expect(image).toBeInTheDocument();
      expect(image).toHaveAttribute("src", "https://example.com/image.jpg");
    });

    it("doesn't render image when image prop is not provided", () => {
      const { queryByRole } = render(<BodyBanner />);
      const image = queryByRole("img");
      expect(image).not.toBeInTheDocument();
    });

    it("renders image in separate column when size is large", () => {
      const { container, getByRole } = render(
        <BodyBanner
          size="large"
          image={<img src="https://example.com/image.jpg" alt="Test image" />}
        />,
      );
      const image = getByRole("img");
      expect(image).toBeInTheDocument();
      const imageContainer = container.querySelector(".body-banner__image");
      expect(imageContainer).toBeInTheDocument();
    });

    it("renders image in content when size is not large", () => {
      const { container, getByRole } = render(
        <BodyBanner
          image={<img src="https://example.com/image.jpg" alt="Test image" />}
        />,
      );
      const imageContainer = container.querySelector(".body-banner__image");
      expect(imageContainer).toBeInTheDocument();
      const image = getByRole("img");
      expect(image).toBeInTheDocument();
    });
  });

  describe("className prop", () => {
    it("has additional class when className is set", () => {
      const { container } = render(<BodyBanner className="custom-class" />);
      expect(container.querySelector(".body-banner")).toHaveClass(
        "body-banner",
      );
      expect(container.querySelector(".body-banner")).toHaveClass(
        "custom-class",
      );
    });
  });

  describe("button className prop", () => {
    it("applies buttonClassName to the button", () => {
      const { getByRole } = render(
        <BodyBanner buttonText="Click" buttonClassName="custom-button-class" />,
      );
      const button = getByRole("button");
      expect(button).toHaveClass("custom-button-class");
    });
  });

  describe("responsive layout", () => {
    it("renders grid structure with proper content column", () => {
      const { container } = render(
        <BodyBanner size="small">
          <h3>Test</h3>
        </BodyBanner>,
      );
      const gridCol = container.querySelector(".body-banner__content");
      expect(gridCol).toBeInTheDocument();
    });

    it("has button container", () => {
      const { container } = render(<BodyBanner buttonText="Click" />);
      const buttonContainer = container.querySelector(".body-banner__button");
      expect(buttonContainer).toBeInTheDocument();
    });

    it("has content-inner container", () => {
      const { container } = render(
        <BodyBanner>
          <h3>Test</h3>
        </BodyBanner>,
      );
      const contentInner = container.querySelector(
        ".body-banner__content-inner",
      );
      expect(contentInner).toBeInTheDocument();
    });
  });
});