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

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

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

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

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

    // Test semantic color classes (excluding background-primary and background-contrast)
    [
      "background-secondary",
      "background-accent",
      "background-accent1-blog",
      "background-accent2-blog",
      "fill-subtle",
      "fill-accent1",
      "fill-accent2",
      "fill-accent3",
      "fill-accent4",
      "fill-accent5",
    ].map((color) => {
      it(`has ${color} class when color is ${color}`, () => {
        const { getByTestId } = render(
          <CardSection data-testid="test-id" color={color} />,
        );
        expect(getByTestId("test-id")).toHaveClass(color);
      });
    });

    it(`has background-contrast and text-inverse classes when color is background-contrast`, () => {
      const { getByTestId } = render(
        <CardSection data-testid="test-id" color="background-contrast" />,
      );
      expect(getByTestId("test-id")).toHaveClass("background-contrast");
      expect(getByTestId("test-id")).toHaveClass("text-inverse");
    });

    it(`doesn't have background-primary class when color is background-primary`, () => {
      const { getByTestId } = render(
        <CardSection data-testid="test-id" color="background-primary" />,
      );
      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
    });

    it(`doesn't have any color class when no color is specified`, () => {
      const { getByTestId } = render(<CardSection data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("card__section");
      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
    });

    it(`has card__section--fill class when isFilling is passed`, () => {
      const { getByTestId } = render(
        <CardSection data-testid="test-id" isFilling />,
      );
      expect(getByTestId("test-id")).toHaveClass("card__section--fill");
    });
    it(`doenst have card__section--fill class when isFilling isnt passed`, () => {
      const { container } = render(<CardSection data-testid="test-id" />);
      expect(
        container.getElementsByClassName("card__section--fill").length,
      ).toBe(0);
    });
    it('has card__section--space-small class when space="small"', () => {
      const { getByTestId } = render(
        <CardSection data-testid="test-id" space="small" />,
      );
      expect(getByTestId("test-id")).toHaveClass("card__section--space-small");
    });
    it('has card__section--space-large class when space="large"', () => {
      const { getByTestId } = render(
        <CardSection data-testid="test-id" space="large" />,
      );
      expect(getByTestId("test-id")).toHaveClass("card__section--space-large");
    });
    it("does not have card__section--space-small class when space is not set", () => {
      const { getByTestId } = render(<CardSection data-testid="test-id" />);
      expect(getByTestId("test-id")).not.toHaveClass(
        "card__section--space-small",
      );
    });
    it("does not have card__section--space-large class when space is not set", () => {
      const { getByTestId } = render(<CardSection data-testid="test-id" />);
      expect(getByTestId("test-id")).not.toHaveClass(
        "card__section--space-large",
      );
    });
  });
});