import React from "react";
import { MobileLinkGroups } from "./index";

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

jest.mock("@shared/components/material-icon", () => ({
  MaterialIcon: ({ name, className }: any) => (
    <span data-testid={`icon-${name}`} className={className}>
      {name}
    </span>
  ),
}));

jest.mock("@shared/contentful/blocks/button", () => ({
  Button: ({
    children,
    buttonClassName,
    onClick,
    linkClassName,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    linkVariant,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    showButtonAs,
    ...rest
  }: any) => (
    <button
      data-testid="button"
      className={buttonClassName || linkClassName}
      onClick={onClick}
      aria-expanded={rest["aria-expanded"]}
    >
      {children || rest.buttonLabel}
    </button>
  ),
}));

describe("MobileLinkGroups", () => {
  it("renders nothing when link is undefined", () => {
    const { container } = render(<MobileLinkGroups link={undefined} />);
    expect(container.innerHTML).toBe("");
  });

  it("renders single Button when link has href (isButton)", () => {
    const link = { href: "/shop", buttonLabel: "Shop", anchorId: "shop1" };
    render(<MobileLinkGroups link={link as any} />);
    expect(screen.getByTestId("button")).toHaveTextContent("Shop");
  });

  describe("Group rendering", () => {
    const groupLink = {
      anchorId: "grp-1",
      title: "Services",
      items: {
        items: [
          { buttonLabel: "Internet", href: "/internet", anchorId: "s1" },
          { buttonLabel: "TV", href: "/tv", anchorId: "s2" },
        ],
      },
    };

    it("renders group title button", () => {
      render(<MobileLinkGroups link={groupLink as any} />);
      expect(screen.getByText("Services")).toBeInTheDocument();
    });

    it("renders down arrow icon when closed", () => {
      render(<MobileLinkGroups link={groupLink as any} />);
      expect(
        screen.getByTestId("icon-keyboard_arrow_down")
      ).toBeInTheDocument();
    });

    it("toggles open state and shows up arrow when open", () => {
      render(<MobileLinkGroups link={groupLink as any} />);
      const toggleBtn = screen.getAllByTestId("button")[0];
      fireEvent.click(toggleBtn);
      expect(screen.getByTestId("icon-keyboard_arrow_up")).toBeInTheDocument();
    });

    it("renders submenu items when open", () => {
      render(<MobileLinkGroups link={groupLink as any} />);
      fireEvent.click(screen.getAllByTestId("button")[0]);
      expect(screen.getByText("Internet")).toBeInTheDocument();
      expect(screen.getByText("TV")).toBeInTheDocument();
    });

    it("renders submenu as list items", () => {
      render(<MobileLinkGroups link={groupLink as any} />);
      fireEvent.click(screen.getAllByTestId("button")[0]);
      const listItems = screen.getAllByRole("listitem");
      expect(listItems).toHaveLength(2);
    });

    it("closes on second toggle click", () => {
      render(<MobileLinkGroups link={groupLink as any} />);
      const toggleBtn = screen.getAllByTestId("button")[0];
      fireEvent.click(toggleBtn);
      fireEvent.click(toggleBtn);
      expect(
        screen.getByTestId("icon-keyboard_arrow_down")
      ).toBeInTheDocument();
    });

    it("does not render submenu when closed", () => {
      render(<MobileLinkGroups link={groupLink as any} />);
      expect(screen.queryByRole("list")).not.toBeInTheDocument();
    });

    it("handles null items", () => {
      const nullItems = { ...groupLink, items: null };
      render(<MobileLinkGroups link={nullItems as any} />);
      fireEvent.click(screen.getAllByTestId("button")[0]);
      // No list rendered since subMenu is empty
      expect(screen.queryByRole("list")).not.toBeInTheDocument();
    });

    it("handles empty items array", () => {
      const emptyItems = { ...groupLink, items: { items: [] } };
      render(<MobileLinkGroups link={emptyItems as any} />);
      fireEvent.click(screen.getAllByTestId("button")[0]);
      expect(screen.queryByRole("list")).not.toBeInTheDocument();
    });

    it("renders null title when title is missing", () => {
      const noTitle = { ...groupLink, title: null };
      render(<MobileLinkGroups link={noTitle as any} />);
      // Should render without error, button exists
      expect(screen.getAllByTestId("button")[0]).toBeInTheDocument();
    });
  });
});