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

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

const steps1 = [{ href: "/test1", isCurrent: false, title: "test1-title" }];
const steps2 = [
  { href: "/test1", isCurrent: false, title: "test1-title" },
  { href: "/test2", isCurrent: true, title: "test2-title" },
  { href: "/test3", isCurrent: true, title: "test3-title" },
];

//steps prop is required
describe("rendering Stepbar", () => {
  describe("initial state", () => {
    it("has default class stepbar", () => {
      const { getByTestId } = render(
        <Stepbar data-testid="test-id" steps={[]} />,
      );
      expect(getByTestId("test-id")).toHaveClass("stepbar");
    });
    it("ordered list element has default class stepbar__list", () => {
      const { container } = render(<Stepbar steps={[]} />);
      expect(container.querySelector("ol")).toHaveClass("stepbar__list");
    });
  });
  describe("passed props", () => {
    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Stepbar data-testid="test-id" steps={[]} className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("stepbar");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders list element/elements with class stepbar__item when steps prop isnt empty array", () => {
      const { container } = render(
        <Stepbar steps={steps1} className="test-class" />,
      );
      expect(container.querySelector("li")).toBeTruthy();
      expect(container.querySelector("li")).toHaveClass("stepbar__item");
    });
    it(`previous step titles are rendered inside an anchor tag`, () => {
      const { container } = render(
        <Stepbar steps={steps2} className="test-class" />,
      );
      const currentItemIndex = steps2.findIndex((step) => {
        return step.isCurrent;
      });
      const listArr = container.querySelectorAll("li");
      for (let el in steps2) {
        if (el < currentItemIndex) {
          expect(listArr[el].querySelector("a")).toBeTruthy();
          expect(listArr[el].querySelector("a").textContent).toBe(
            `${parseInt(el) + 1}. test${parseInt(el) + 1}-title`,
          );
        } else {
          expect(listArr[el].querySelector("a")).toBeFalsy();
          expect(listArr[el].textContent).toBe(
            `${parseInt(el) + 1}. test${parseInt(el) + 1}-title`,
          );
        }
      }
    });
    it(`previous step titles have class stepbar__link`, () => {
      const { container } = render(
        <Stepbar steps={steps2} className="test-class" />,
      );
      const currentItemIndex = steps2.findIndex((step) => {
        return step.isCurrent;
      });
      const listArr = container.querySelectorAll("li");
      for (let el in steps2) {
        if (el < currentItemIndex) {
          expect(listArr[el].querySelector("a")).toBeTruthy();
          expect(listArr[el].querySelector("a")).toHaveClass("stepbar__link");
        } else {
          expect(listArr[el].querySelector("a")).toBeFalsy();
        }
      }
    });
    it(`first steps element with attribute isCurrent=true renders list el. with class stepbar__item--current`, () => {
      const { container } = render(
        <Stepbar steps={steps2} className="test-class" />,
      );
      const currentItemIndex = steps2.findIndex((step) => {
        return step.isCurrent;
      });
      const item = container.querySelectorAll("li")[currentItemIndex];
      expect(item).toBeTruthy();
      expect(item).toHaveClass("stepbar__item--current");
    });
  });
});