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

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

const items = [
  {
    title: "First item",
    description: "First description",
  },
  {
    title: "Second item",
    description: "Second description",
    label: "June 2026",
  },
];

describe("rendering Timeline", () => {
  it("has default class timeline", () => {
    const { getByTestId } = render(
      <Timeline data-testid="test-id" items={items} />,
    );

    expect(getByTestId("test-id")).toHaveClass("timeline");
  });

  it("renders item for each timeline entry", () => {
    const { container } = render(<Timeline items={items} />);

    expect(container.getElementsByClassName("timeline__item")).toHaveLength(2);
  });

  it("renders connector only for non-last items", () => {
    const { container } = render(<Timeline items={items} />);
    const renderedItems = container.getElementsByClassName("timeline__item");

    expect(
      renderedItems[0].getElementsByClassName("timeline__line"),
    ).toHaveLength(1);
    expect(
      renderedItems[1].getElementsByClassName("timeline__line"),
    ).toHaveLength(0);
  });

  it("has additional class when className is set", () => {
    const { getByTestId } = render(
      <Timeline data-testid="test-id" items={items} className="test-class" />,
    );

    expect(getByTestId("test-id")).toHaveClass("timeline");
    expect(getByTestId("test-id")).toHaveClass("test-class");
  });

  it("renders label slots for all items and visible text only for labeled items", () => {
    const { container, getByText } = render(<Timeline items={items} />);
    const renderedLabels = container.getElementsByClassName("timeline__label");

    expect(renderedLabels).toHaveLength(2);
    expect(getByText("June 2026")).toBeInTheDocument();
    expect(renderedLabels[0].textContent).toBe("");
    expect(renderedLabels[1].textContent).toBe("June 2026");
  });

  it("uses start prop for visible numbering", () => {
    const { container } = render(<Timeline items={items} start={4} />);
    const renderedNumbers =
      container.getElementsByClassName("timeline__number");

    expect(renderedNumbers[0].textContent).toBe("4");
    expect(renderedNumbers[1].textContent).toBe("5");
  });

  it("renders `h3` headlines by default", () => {
    const { container } = render(<Timeline items={items} />);
    const renderedHeadlines = container.querySelectorAll(
      "h3.timeline__headline",
    );

    expect(renderedHeadlines).toHaveLength(2);
  });

  it("renders custom headline tag when titleTag is set", () => {
    const { container } = render(<Timeline items={items} titleTag="h4" />);
    const renderedHeadlines = container.querySelectorAll(
      "h4.timeline__headline",
    );

    expect(renderedHeadlines).toHaveLength(2);
  });
});