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

import { Pagination } from "../Pagination.tsx";

//items array is required
describe("rendering Pagination", () => {
  describe("initial state", () => {
    it("has default class pagination", () => {
      const { getByTestId } = render(
        <Pagination items={[]} data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("pagination");
    });
  });

  describe("passed props", () => {
    const createArray = (length, activeItemNum = 1) => {
      return Array(length)
        .fill()
        .map((_, i) => ({
          href: `/test${i + 1}`,
          label: `item${i + 1}`,
          isActive: activeItemNum === i + 1,
        }));
    };

    it("has label when set", () => {
      const { getByLabelText } = render(
        <Pagination items={[]} label="test-label" />,
      );
      expect(getByLabelText("test-label")).toBeInTheDocument();
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Pagination items={[]} data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("pagination");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders items when items array is set", () => {
      const itemsArr = createArray(3);
      const { container } = render(<Pagination items={itemsArr} />);
      expect(container.querySelectorAll("li").length).toBe(3);
    });
    it("pagination items have correct href attribute", () => {
      const itemsArr = createArray(3);
      const { container } = render(<Pagination items={itemsArr} />);
      const items = container.querySelectorAll("li");
      for (let i in itemsArr) {
        expect(items[i].querySelector("a").getAttribute("href")).toBe(
          `/test${parseInt(i) + 1}`,
        );
      }
    });
    it("pagination items have correct label", () => {
      const itemsArr = createArray(3);
      const { container } = render(<Pagination items={itemsArr} />);
      const items = container.querySelectorAll("li");
      for (let i in itemsArr) {
        expect(items[i]).toHaveTextContent(`item${parseInt(i) + 1}`);
      }
    });

    for (let i = 1; i <= 10; i++) {
      it("first and last item has icon/label based on current position when isCompact is set", () => {
        const itemsArr = createArray(10, i);
        const { container } = render(<Pagination items={itemsArr} isCompact />);
        const queryItems = container.querySelectorAll("li");
        if (i < 3) {
          expect(queryItems[0]).toHaveTextContent("item1");
          expect(
            queryItems[9].querySelector("use").getAttribute("xlink:href"),
          ).toBe("/sprite.svg#chevron-end");
        } else if (i <= 8) {
          expect(
            queryItems[0].querySelector("use").getAttribute("xlink:href"),
          ).toBe("/sprite.svg#chevron-start");
          expect(
            queryItems[9].querySelector("use").getAttribute("xlink:href"),
          ).toBe("/sprite.svg#chevron-end");
        } else {
          expect(queryItems[9]).toHaveTextContent("item10");
          expect(
            queryItems[0].querySelector("use").getAttribute("xlink:href"),
          ).toBe("/sprite.svg#chevron-start");
        }
      });
    }
    for (let i = 1; i <= 8; i++) {
      it("renders separator/separators when isCompact is not set", () => {
        const itemsArr = createArray(10, i);
        const { container } = render(<Pagination items={itemsArr} />);
        const sepNum = i <= 3 || i >= 8 ? 1 : 2;
        expect(
          container.getElementsByClassName("pagination__separator").length,
        ).toBe(sepNum);
      });
    }
    it("separator in not rendered when isCompact is set", () => {
      const itemsArr = createArray(10, 5);
      const { container } = render(<Pagination items={itemsArr} isCompact />);
      expect(
        container.getElementsByClassName("pagination__separator").length,
      ).toBe(0);
    });
  });
});