import { fireEvent, render, screen } from "@testing-library/react";
import { FeatureAccordion } from "../FeatureAccordion";
import FeatureAccordionStatic from "../FeatureAccordion.static";
import { FeatureAccordionItem } from "../FeatureAccordionItem";

// Helper function to initialize feature accordion static behavior
const initializeFeatureAccordion = (container) => {
  const featureAccordionElement = container.querySelector(
    "[data-feature-accordion]",
  );
  if (
    featureAccordionElement &&
    !featureAccordionElement.ODS_FeatureAccordion
  ) {
    new FeatureAccordionStatic(featureAccordionElement);
  }
  return featureAccordionElement;
};

const renderAccordion = (props = {}) => {
  const result = render(
    <FeatureAccordion {...props}>
      <FeatureAccordionItem
        id="item-1"
        title="Item 1"
        imageUrl="/img1.png"
        imageAlt="Image 1"
      >
        Content 1
      </FeatureAccordionItem>
      <FeatureAccordionItem
        id="item-2"
        title="Item 2"
        imageUrl="/img2.png"
        imageAlt="Image 2"
      >
        Content 2
      </FeatureAccordionItem>
    </FeatureAccordion>,
  );

  // Initialize static behavior
  initializeFeatureAccordion(result.container);

  return result;
};

describe("FeatureAccordion", () => {
  it("renders with default class", () => {
    const { container } = renderAccordion();
    expect(container.firstChild).toHaveClass("feature-accordion");
  });

  it("renders all items", () => {
    renderAccordion();
    expect(screen.getByText("Item 1")).toBeInTheDocument();
    expect(screen.getByText("Item 2")).toBeInTheDocument();
  });

  it("renders children as FeatureAccordionItem", () => {
    renderAccordion();
    expect(screen.getByText("Item 1")).toBeInTheDocument();
    expect(screen.getByText("Item 2")).toBeInTheDocument();
  });

  it("opens only one item at a time", () => {
    renderAccordion();
    const item1 = screen.getByText("Item 1");
    const item2 = screen.getByText("Item 2");
    fireEvent.click(item2);
    const item1Container = item1.closest(".feature-accordion__item");
    const item2Container = item2.closest(".feature-accordion__item");
    expect(item2Container).toHaveClass("is-active");
    expect(item1Container).not.toHaveClass("is-active");
  });

  it("shows correct image for active item", () => {
    renderAccordion();
    fireEvent.click(screen.getByText("Item 2"));
    const imgs = screen.getAllByAltText("Image 2");
    const visibleImg = imgs.find((img) => !img.classList.contains("hide"));
    expect(visibleImg).toBeInTheDocument();
    expect(visibleImg).toHaveAttribute("src", "/img2.png");
  });

  it("merges additional className", () => {
    const { container } = renderAccordion({ className: "test-class" });
    expect(container.firstChild).toHaveClass("test-class");
  });

  it("spreads additional props to the rendered element", () => {
    const { container } = renderAccordion({ "data-testid": "fa" });
    expect(container.firstChild).toHaveAttribute("data-testid", "fa");
  });

  it("applies previewClassName to preview area", () => {
    const { container } = renderAccordion({
      previewClassName: "align-self-middle--xl",
    });
    expect(container.querySelector(".feature-accordion__preview")).toHaveClass(
      "align-self-middle--xl",
    );
  });
});