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

describe("Expander", () => {
  it("renders basic expander with summary text", () => {
    render(<Expander summary="Show details">Content</Expander>);
    expect(screen.getByText("Show details")).toBeInTheDocument();
    expect(screen.getByText("Content")).toBeInTheDocument();
  });

  it("changes summary text when opened", () => {
    render(
      <Expander summary="Show details" summaryOpened="Hide details">
        Content
      </Expander>,
    );

    expect(screen.getByText("Show details")).toBeInTheDocument();

    // Click to open the expander
    fireEvent.click(screen.getByText("Show details"));

    expect(screen.getByText("Hide details")).toBeInTheDocument();
  });

  it("renders custom summary with renderSummary prop", () => {
    render(
      <Expander
        summary="Custom summary"
        renderSummary={({ summary }) => (
          <>
            <span data-testid="custom-summary">{summary}</span>
            <Icon name="accessibility-motor" data-summary-icon size="medium" />
          </>
        )}
      >
        Content
      </Expander>,
    );

    expect(screen.getByTestId("custom-summary")).toHaveTextContent(
      "Custom summary",
    );
  });

  it("renders custom summary when opened with renderSummaryOpened prop", () => {
    render(
      <Expander
        summary="Show details"
        summaryOpened="Hide details"
        renderSummaryOpened={({ summaryOpened }) => (
          <>
            <span data-testid="custom-summary-opened">{summaryOpened}</span>
            <Icon name="birthday" size="large" color="danger" />
          </>
        )}
      >
        Content
      </Expander>,
    );

    // Click to open the expander
    fireEvent.click(screen.getByText("Show details"));

    expect(screen.getByTestId("custom-summary-opened")).toHaveTextContent(
      "Hide details",
    );
  });

  it("toggles content visibility when clicked", () => {
    const { container } = render(
      <Expander summary="Show details">
        <p data-testid="content">Hidden content</p>
      </Expander>,
    );

    const details = container.querySelector("details");
    expect(details).not.toHaveAttribute("open");

    // Click to open
    fireEvent.click(screen.getByText("Show details"));
    expect(details).toHaveAttribute("open");

    // Click to close
    fireEvent.click(screen.getByText("Show details"));
    expect(details).not.toHaveAttribute("open");
  });

  it("has default class expander", () => {
    const { getByTestId } = render(
      <Expander data-testid="test-id" summary="Show details">
        Content
      </Expander>,
    );
    expect(getByTestId("test-id")).toHaveClass("expander");
  });

  it("has additional class when className is set", () => {
    const { getByTestId } = render(
      <Expander
        data-testid="test-id"
        className="test-class"
        summary="Show details"
      >
        Content
      </Expander>,
    );
    expect(getByTestId("test-id")).toHaveClass("expander");
    expect(getByTestId("test-id")).toHaveClass("test-class");
  });

  it("sets data-toggle-group attribute when toggleGroup is provided", () => {
    const { getByTestId } = render(
      <Expander
        data-testid="test-id"
        summary="Show details"
        toggleGroup="group1"
      >
        Content
      </Expander>,
    );
    expect(getByTestId("test-id")).toHaveAttribute(
      "data-toggle-group",
      "group1",
    );
  });

  it("does not set data-toggle-group attribute when toggleGroup is not provided", () => {
    const { getByTestId } = render(
      <Expander data-testid="test-id" summary="Show details">
        Content
      </Expander>,
    );
    expect(getByTestId("test-id")).not.toHaveAttribute("data-toggle-group");
  });

  it("renders multiple expanders with the same toggleGroup", () => {
    render(
      <>
        <Expander
          data-testid="expander-1"
          summary="Expander 1"
          toggleGroup="sync-group"
        >
          Content 1
        </Expander>
        <Expander
          data-testid="expander-2"
          summary="Expander 2"
          toggleGroup="sync-group"
        >
          Content 2
        </Expander>
        <Expander
          data-testid="expander-3"
          summary="Expander 3"
          toggleGroup="sync-group"
        >
          Content 3
        </Expander>
      </>,
    );

    expect(screen.getByTestId("expander-1")).toHaveAttribute(
      "data-toggle-group",
      "sync-group",
    );
    expect(screen.getByTestId("expander-2")).toHaveAttribute(
      "data-toggle-group",
      "sync-group",
    );
    expect(screen.getByTestId("expander-3")).toHaveAttribute(
      "data-toggle-group",
      "sync-group",
    );
  });

  it("applies isFullWidth class when isFullWidth prop is true", () => {
    const { getByTestId } = render(
      <Expander data-testid="test-id" summary="Show details" isFullWidth>
        Content
      </Expander>,
    );
    expect(getByTestId("test-id")).toHaveClass("expander--fullwidth");
  });

  it("applies placement-top class when placement prop is top", () => {
    const { getByTestId } = render(
      <Expander data-testid="test-id" summary="Show details" placement="top">
        Content
      </Expander>,
    );
    expect(getByTestId("test-id")).toHaveClass("expander--placement-top");
  });
});