import { SeeMore } from "./index";

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

describe("SeeMore", () => {
  const defaultList = ["Item 1", "Item 2", "Item 3"];

  it("renders with default text when no text prop is provided", () => {
    render(<SeeMore list={defaultList} />);
    expect(screen.getByText("See details")).toBeInTheDocument();
  });

  it("renders with custom text when text prop is provided", () => {
    render(<SeeMore list={defaultList} text="Show more info" />);
    expect(screen.getByText("Show more info")).toBeInTheDocument();
  });

  it("renders the checklist items", () => {
    render(<SeeMore list={defaultList} />);
    defaultList.forEach(item => {
      expect(screen.getByText(item)).toBeInTheDocument();
    });
  });

  it("starts with details expanded (showDetails is true)", () => {
    render(<SeeMore list={defaultList} />);
    const button = screen.getByRole("button");
    expect(button).toHaveAttribute("aria-expanded", "true");
  });

  it("shows keyboard_arrow_down icon when expanded", () => {
    render(<SeeMore list={defaultList} />);
    expect(screen.getByText("keyboard_arrow_down")).toBeInTheDocument();
  });

  it("collapses details when button is clicked", () => {
    render(<SeeMore list={defaultList} />);
    const button = screen.getByRole("button");

    fireEvent.click(button);

    expect(button).toHaveAttribute("aria-expanded", "false");
  });

  it("shows keyboard_arrow_up icon when collapsed", () => {
    render(<SeeMore list={defaultList} />);
    const button = screen.getByRole("button");

    fireEvent.click(button);

    expect(screen.getByText("keyboard_arrow_up")).toBeInTheDocument();
  });

  it("expands details again on second click", () => {
    render(<SeeMore list={defaultList} />);
    const button = screen.getByRole("button");

    fireEvent.click(button);
    fireEvent.click(button);

    expect(button).toHaveAttribute("aria-expanded", "true");
    expect(screen.getByText("keyboard_arrow_down")).toBeInTheDocument();
  });

  it("stops event propagation on click", () => {
    const parentClickHandler = jest.fn();
    render(
      <div onClick={parentClickHandler}>
        <SeeMore list={defaultList} />
      </div>
    );
    const button = screen.getByRole("button");

    fireEvent.click(button);

    expect(parentClickHandler).not.toHaveBeenCalled();
  });

  it("passes list items to Checklist", () => {
    const items = ["Feature A", "Feature B"];
    render(<SeeMore list={items} />);

    items.forEach(item => {
      expect(screen.getByText(item)).toBeInTheDocument();
    });
  });

  it("renders with an empty list without crashing", () => {
    render(<SeeMore list={[]} />);
    expect(screen.getByRole("button")).toBeInTheDocument();
  });

  it("has the correct displayName", () => {
    expect(SeeMore.displayName).toBe("SeeMore");
  });
});