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

import { Pill } from "../";

describe("rendering Pill", () => {
  describe("initial state", () => {
    it("has default className pill", () => {
      const { getByTestId } = render(<Pill data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("pill");
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Pill>pill</Pill>);
      expect(getByText("pill")).toBeInTheDocument();
    });

    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Pill className="test-class" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("pill");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });

    it("has size class when size prop is set", () => {
      const { getByTestId } = render(
        <Pill size="large" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("pill--large");
    });

    it("supports all available sizes", () => {
      const sizes = ["small", "medium", "large", "xlarge", "xxlarge"];

      sizes.forEach((size) => {
        const { getByTestId } = render(
          <Pill size={size} data-testid={`test-${size}`}>
            {size}
          </Pill>,
        );

        expect(getByTestId(`test-${size}`)).toHaveClass(`pill--${size}`);
      });
    });

    it("has default styling without color modifier", () => {
      const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
      expect(getByTestId("test-id")).toHaveClass("pill");
      expect(getByTestId("test-id")).not.toHaveClass("surface-secondary");
    });

    it("has surface-secondary class when color is surface-secondary", () => {
      const { getByTestId } = render(
        <Pill color="surface-secondary" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("surface-secondary");
    });

    it("has surface-tertiary class when color is surface-tertiary", () => {
      const { getByTestId } = render(
        <Pill color="surface-tertiary" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("surface-tertiary");
    });

    it("has surface-subtle class when color is surface-subtle", () => {
      const { getByTestId } = render(
        <Pill color="surface-subtle" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("surface-subtle");
    });

    it("has surface-moderate class when color is surface-moderate", () => {
      const { getByTestId } = render(
        <Pill color="surface-moderate" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("surface-moderate");
    });

    it("has surface-contrast class when color is surface-contrast", () => {
      const { getByTestId } = render(
        <Pill color="surface-contrast" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("surface-contrast");
    });

    it("has surface-accent class when color is surface-accent", () => {
      const { getByTestId } = render(
        <Pill color="surface-accent" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("surface-accent");
    });

    it("has transparent class when color is transparent", () => {
      const { getByTestId } = render(
        <Pill color="transparent" data-testid="test-id">
          pill
        </Pill>,
      );
      expect(getByTestId("test-id")).toHaveClass("transparent");
    });

    it("supports all available colors", () => {
      const colors = [
        "surface-secondary",
        "surface-tertiary",
        "surface-subtle",
        "surface-moderate",
        "surface-contrast",
        "surface-accent",
        "transparent",
      ];

      colors.forEach((color) => {
        const { getByTestId } = render(
          <Pill color={color} data-testid={`test-${color}`}>
            {color}
          </Pill>,
        );

        expect(getByTestId(`test-${color}`)).toHaveClass(color);
      });
    });

    it("passes other props", () => {
      const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
      expect(getByTestId("test")).toBeInTheDocument();
    });
  });
});