import { createRef } from "react";
import { render, screen } from "@testing-library/react";
import { Segment } from "./Segment";

describe("Segment", () => {
  it("applies mobius and mobius-segment classes", () => {
    render(<Segment data-testid="segment" />);

    const el = screen.getByTestId("segment");
    expect(el).toHaveClass("mobius");
    expect(el).toHaveClass("mobius-segment");
  });

  it("forwards custom className", () => {
    render(<Segment data-testid="segment" className="custom" />);

    expect(screen.getByTestId("segment")).toHaveClass("custom");
  });

  it("applies subtle colour class", () => {
    render(<Segment data-testid="segment" colour="subtle" />);

    expect(screen.getByTestId("segment")).toHaveClass("subtle");
  });

  it("applies primary colour class", () => {
    render(<Segment data-testid="segment" colour="primary" />);

    expect(screen.getByTestId("segment")).toHaveClass("primary");
  });

  it("applies secondary colour class", () => {
    render(<Segment data-testid="segment" colour="secondary" />);

    expect(screen.getByTestId("segment")).toHaveClass("secondary");
  });

  it("applies inverted class when prop is true", () => {
    render(<Segment data-testid="segment" inverted />);

    expect(screen.getByTestId("segment")).toHaveClass("inverted");
  });

  it("renders heading when provided", () => {
    render(<Segment heading="My Heading" />);

    const heading = screen.getByText("My Heading");
    expect(heading).toBeInTheDocument();
    expect(heading).toHaveClass("mobius-segment__heading");
  });

  it("does not render heading when not provided", () => {
    const { container } = render(<Segment>Content</Segment>);

    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- no role/text to query when heading is absent
    expect(container.querySelector(".mobius-segment__heading")).toBeNull();
  });

  it("renders children", () => {
    render(<Segment>Child content</Segment>);

    expect(screen.getByText("Child content")).toBeInTheDocument();
  });

  it("forwards ref", () => {
    const ref = createRef<HTMLDivElement>();

    render(<Segment ref={ref}>With ref</Segment>);

    expect(ref.current).toBeInstanceOf(HTMLDivElement);
  });
});
