import { jsx, jsxs } from "react/jsx-runtime";
import { render } from "@testing-library/react";
import { Help, Doc, MenuMore } from "@gympass/yoga-icons";
import ThemeProvider from "../../Theme";
import AvatarCircle from "../../Avatar/web/AvatarCircle";
import Icon from "../../Icon";
import NavigationMenu from "./NavigationMenu";
describe("<NavigationMenu />", () => {
  describe("Snapshots", () => {
    it("should match NavigationMenu", () => {
      const renderWrapper = ({ children }) => {
        return /* @__PURE__ */ jsx("a", { href: "https://www.gympass.com", children });
      };
      const IconComponent = ({ icon }) => {
        return /* @__PURE__ */ jsx(Icon, { as: icon });
      };
      const itemMainGroup = [
        {
          expanded: true,
          icon: Doc,
          label: "Subscription",
          tag: "new",
          subitems: [{ label: "Details" }]
        },
        {
          active: true,
          icon: Doc,
          label: "Billing"
        }
      ];
      const itemGroups = [
        [...itemMainGroup],
        [
          {
            icon: Help,
            label: "Help"
          }
        ]
      ];
      const bottomItems = [
        ...itemMainGroup.slice(0, 2).map(({ active, icon, label }) => ({
          active,
          icon,
          label,
          wrapper: renderWrapper
        })),
        {
          active: false,
          icon: MenuMore,
          label: "More",
          wrapper: ({ children }) => /* @__PURE__ */ jsx("div", { children })
        }
      ];
      const { container } = render(
        /* @__PURE__ */ jsxs(ThemeProvider, { children: [
          /* @__PURE__ */ jsxs(
            NavigationMenu,
            {
              children: [
                /* @__PURE__ */ jsx(NavigationMenu.Header, { children: /* @__PURE__ */ jsx(
                  NavigationMenu.Menu,
                  {
                    avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
                    title: "Company",
                    subtitle: "Reseller"
                  }
                ) }),
                /* @__PURE__ */ jsx(NavigationMenu.Items, { children: itemGroups.map((group, index) => /* @__PURE__ */ jsx(NavigationMenu.ItemsGroup, { children: group.map((item) => /* @__PURE__ */ jsx(
                  NavigationMenu.Item,
                  {
                    active: item.active,
                    expanded: item.expanded,
                    icon: /* @__PURE__ */ jsx(IconComponent, { icon: item.icon }),
                    label: item.label,
                    wrapper: renderWrapper,
                    tag: item.tag,
                    children: item.subitems && item.subitems.map(({ label }) => /* @__PURE__ */ jsx(
                      NavigationMenu.Subitem,
                      {
                        label,
                        wrapper: renderWrapper
                      },
                      label
                    ))
                  },
                  item.label
                )) }, index)) }),
                /* @__PURE__ */ jsx(NavigationMenu.Footer, { children: /* @__PURE__ */ jsx(
                  NavigationMenu.Switcher,
                  {
                    avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
                    title: "User",
                    subtitle: "Admin, Supervisor"
                  }
                ) })
              ]
            }
          ),
          /* @__PURE__ */ jsx(NavigationMenu.BottomItems, { children: bottomItems.map(({ active, icon, label, wrapper }) => /* @__PURE__ */ jsx(
            NavigationMenu.BottomItem,
            {
              active,
              icon,
              label,
              wrapper
            },
            label
          )) })
        ] })
      );
      expect(container).toMatchSnapshot();
    });
    it("should match NavigationMenu.Menu with an action", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(NavigationMenu, { responsive: false, children: /* @__PURE__ */ jsx(NavigationMenu.Header, { children: /* @__PURE__ */ jsx(
          NavigationMenu.Menu,
          {
            avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
            title: "Company",
            subtitle: "Reseller",
            onClick: () => null
          }
        ) }) }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should match NavigationMenu.Switcher with actions", () => {
      const actions = [
        {
          id: "Action 1",
          label: "Action 1",
          onClick: () => null
        },
        {
          id: "Action 2",
          label: "Action 2",
          onClick: () => null
        }
      ];
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(NavigationMenu, { responsive: false, children: /* @__PURE__ */ jsx(NavigationMenu.Footer, { children: /* @__PURE__ */ jsx(
          NavigationMenu.Switcher,
          {
            actions,
            avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
            sideOffset: 36,
            subtitle: "Admin, Supervisor",
            title: "User"
          }
        ) }) }) })
      );
      expect(container).toMatchSnapshot();
    });
  });
});
