/**
 * Unit tests for the Pictogram component.
 */

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

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

describe("Pictogram component", () => {
  describe("initial state", () => {
    it("has default class icon and theme-aware modifier", () => {
      const { getByTestId } = render(
        <Pictogram data-testid="test-pictogram" name="pictogram-skylink" />,
      );
      const element = getByTestId("test-pictogram");
      expect(element).toHaveClass("icon");
      expect(element).toHaveClass("icon--pictogram");
    });

    it("renders both light and dark use elements", () => {
      const { container } = render(<Pictogram name="pictogram-skylink" />);
      const lightUse = container.querySelector(".icon__use--light");
      const darkUse = container.querySelector(".icon__use--dark");

      expect(lightUse).toBeInTheDocument();
      expect(darkUse).toBeInTheDocument();
    });

    it("light use points to base name, dark use points to name with --dark suffix", () => {
      const { container } = render(<Pictogram name="pictogram-skylink" />);
      const lightUse = container.querySelector(".icon__use--light");
      const darkUse = container.querySelector(".icon__use--dark");

      expect(lightUse?.getAttribute("xlink:href")).toBe(
        "/sprite.svg#pictogram-skylink",
      );
      expect(darkUse?.getAttribute("xlink:href")).toBe(
        "/sprite.svg#pictogram-skylink--dark",
      );
    });
  });

  describe("accessibility", () => {
    it("is accessible", async () => {
      const { container } = render(
        <Pictogram name="pictogram-skylink" alt="Skylink pictogram" />,
      );
      expect(await axe(container)).toHaveNoViolations();
    });

    it("has aria-hidden when no alt text provided", () => {
      const { getByTestId } = render(
        <Pictogram data-testid="test-pictogram" name="pictogram-skylink" />,
      );
      expect(getByTestId("test-pictogram")).toHaveAttribute(
        "aria-hidden",
        "true",
      );
    });

    it("has proper role when alt text is provided", () => {
      const { getByTestId } = render(
        <Pictogram
          data-testid="test-pictogram"
          name="pictogram-skylink"
          alt="Skylink"
        />,
      );
      expect(getByTestId("test-pictogram")).toHaveAttribute("role", "img");
      expect(getByTestId("test-pictogram")).not.toHaveAttribute("aria-hidden");
    });
  });

  describe("props inheritance", () => {
    it("passes through size and color props", () => {
      const { getByTestId } = render(
        <Pictogram
          data-testid="test-pictogram"
          name="pictogram-skylink"
          size="large"
          color="info"
        />,
      );
      const element = getByTestId("test-pictogram");
      expect(element).toHaveClass("icon--large");
      expect(element).toHaveClass("icon--info");
    });

    it("passes through custom className", () => {
      const { getByTestId } = render(
        <Pictogram
          data-testid="test-pictogram"
          name="pictogram-skylink"
          className="custom-class"
        />,
      );
      expect(getByTestId("test-pictogram")).toHaveClass("custom-class");
    });
  });

  describe("theme switching", () => {
    it("shows light version by default", () => {
      const { container } = render(<Pictogram name="pictogram-skylink" />);
      const lightUse = container.querySelector(".icon__use--light");
      const darkUse = container.querySelector(".icon__use--dark");

      expect(lightUse).toBeInTheDocument();
      expect(darkUse).toBeInTheDocument();
      // Note: CSS display logic is tested via CSS rules, not inline styles
    });

    it("renders correctly within is-light context", () => {
      const { container } = render(
        <div className="is-light">
          <Pictogram name="pictogram-skylink" />
        </div>,
      );
      const lightUse = container.querySelector(".icon__use--light");
      const darkUse = container.querySelector(".icon__use--dark");

      expect(lightUse).toBeInTheDocument();
      expect(darkUse).toBeInTheDocument();
    });

    it("renders correctly within is-dark context", () => {
      const { container } = render(
        <div className="is-dark">
          <Pictogram name="pictogram-skylink" />
        </div>,
      );
      const lightUse = container.querySelector(".icon__use--light");
      const darkUse = container.querySelector(".icon__use--dark");

      expect(lightUse).toBeInTheDocument();
      expect(darkUse).toBeInTheDocument();
    });
  });
});