import cx from "classnames";
import React from "react";
import {
  CLASS_ACCORDION,
  CLASS_ACCORDION_BODY,
  CLASS_ACCORDION_BUTTON,
  CLASS_ACCORDION_HEADER,
  CLASS_ACCORDION_ICON,
  CLASS_ACCORDION_ITEM,
  CLASS_ACCORDION_TITLE,
  CLASS_CAPTION,
  CLASS_CARD,
  CLASS_CONTAINER,
  CLASS_GRID,
  CLASS_HIDE_LG_UP,
  CLASS_HIDE_MD_DOWN,
  CLASS_MAIN,
  CLASS_MOBILE_BODY,
  CLASS_MOBILE_CTA,
  CLASS_MOBILE_HEADER,
  CLASS_NAV,
  CLASS_NAV_BUTTON,
  CLASS_NAV_BUTTON_INDICATOR,
  CLASS_NAV_CART_ICON,
  CLASS_NAV_DROPDOWN,
  CLASS_NAV_ICON,
  CLASS_NAV_ICON_CTA,
  CLASS_NAV_ITEM,
  CLASS_NAV_ITEM_LEAD,
  CLASS_NAV_ITEM_MAIN,
  CLASS_NAV_ITEM_PUSH,
  CLASS_NAV_LINK,
  CLASS_NAV_LINK_CTA,
  CLASS_NAV_LINK_LOCALE,
  CLASS_NAV_LOCALE,
  CLASS_NAV_MOBILE_LOCALE,
  CLASS_NAV_SELECT,
  CLASS_NAV_SELECT_WRAPPER,
  CLASS_NAV_SPACE_SMALL,
  CLASS_NAV_VERTICAL,
  CLASS_OVERLAY,
  CLASS_ROOT,
  CLASS_SPACER,
  CLASS_SUBNAV,
  CLASS_SUBNAV_ITEM,
  CLASS_TAG,
  CLASS_TAG_ORANGE,
  CLASS_TAG_SMALL,
  CLASS_TEXT_LARGE,
  CLASS_TILE,
  CLASS_TILE_BODY,
  CLASS_TILE_CONTENT,
  CLASS_TILE_LABEL,
  CLASS_TILES,
  CLASS_TOP,
  CLASS_TOP_CONTENT,
} from "./constants";
import type { MegamenuTile, MenuItem, MenuSection } from "./data";
import { megamenuTiles, menuSections } from "./data";
import { getMegamenuIds } from "./ids";
import { MegamenuIcon } from "./MegaMenuIcon";
import { MegamenuSearchContent } from "./MegamenuSearchContent";
import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
import {
  getMegamenuSearchState,
  MegamenuCloseButton,
  MegamenuLogoLink,
  MegamenuMobilePanel,
  MegamenuSearchDropdown,
} from "./shared";

export type MegamenuProps = {
  className?: string;
  title?: string;
  notSticky?: boolean;
  searchEmpty?: boolean;
  searchFilled?: boolean;
  compactLogoOnly?: boolean;
  isB2B?: boolean;
  /** Controls whether My Orange panel shows logged-in or logged-out content. */
  isLoggedIn?: boolean;
  /** Number of items displayed on the cart badge. Empty cart when omitted or zero. */
  cartItems?: number;
  /** Shows an orange dot for a non-empty cart when item count is unavailable. */
  cartHasItems?: boolean;
  /** Tiles displayed below every desktop and mobile menu section. */
  tiles?: MegamenuTile[];
};

const renderMenuItems = (items: MenuItem[]) => (
  <>
    {items.map((item) => (
      <li className={CLASS_SUBNAV_ITEM} key={item.label}>
        <a
          href={item.href ?? "/"}
          className={item.isLarge ? CLASS_TEXT_LARGE : undefined}
        >
          {item.label}
        </a>
        {item.tag ? (
          <span className={cx(CLASS_TAG, CLASS_TAG_ORANGE, CLASS_TAG_SMALL)}>
            {item.tag}
          </span>
        ) : null}
      </li>
    ))}
  </>
);

const renderMenuTiles = (tiles: MegamenuTile[]) => (
  <div className={CLASS_TILES} aria-label="Rýchly prístup">
    {tiles.map((tile, index) => {
      const isActive = tile.isActive ?? index === 0;

      return (
        <a
          className={cx(CLASS_TILE, { "is-active": isActive })}
          href={tile.href ?? "/"}
          key={tile.label}
        >
          <div className={CLASS_TILE_BODY}>
            <MegamenuIcon
              name={tile.icon}
              width={32}
              height={32}
              aria-hidden="true"
            />
            <span className={CLASS_TILE_CONTENT}>
              <strong className={CLASS_TILE_LABEL}>{tile.label}</strong>
              {tile.tag ? (
                <span
                  className={cx(CLASS_TAG, CLASS_TAG_ORANGE, CLASS_TAG_SMALL)}
                >
                  {tile.tag}
                </span>
              ) : null}
            </span>
          </div>
        </a>
      );
    })}
  </div>
);

const renderMenuSectionGrid = (
  section: MenuSection,
  idPrefix: string,
  captionClass: string,
  mergeColumnsToSingleCard = false,
  tiles: MegamenuTile[] = megamenuTiles,
  tilesBeforeGrid = false,
) => {
  const featuredHeadingId = `${idPrefix}-${section.id}-${section.featured.id}`;

  return (
    <>
      <div className={CLASS_GRID}>
        {tilesBeforeGrid ? renderMenuTiles(tiles) : null}
        <div className={cx(CLASS_CARD, "is-highlighted")}>
          <h3 id={featuredHeadingId} className="sr-only">
            {section.featured.heading}
          </h3>
          <ul
            className={CLASS_SUBNAV}
            role="group"
            aria-labelledby={featuredHeadingId}
          >
            {renderMenuItems(section.featured.items)}
          </ul>
        </div>

        {mergeColumnsToSingleCard ? (
          <div className={CLASS_CARD}>
            {section.columns.flat().map((group) => {
              const headingId = `${idPrefix}-${section.id}-${group.id}-heading`;

              return (
                <React.Fragment key={group.id}>
                  <p id={headingId} className={captionClass}>
                    {group.heading}
                  </p>
                  <ul
                    className={CLASS_SUBNAV}
                    role="group"
                    aria-labelledby={headingId}
                  >
                    {renderMenuItems(group.items)}
                  </ul>
                </React.Fragment>
              );
            })}
          </div>
        ) : (
          section.columns.map((groups, columnIndex) => (
            <div className={CLASS_CARD} key={`${section.id}-${columnIndex}`}>
              {groups.map((group) => {
                const headingId = `${idPrefix}-${section.id}-${group.id}-heading`;

                return (
                  <React.Fragment key={group.id}>
                    <p id={headingId} className={captionClass}>
                      {group.heading}
                    </p>
                    <ul
                      className={CLASS_SUBNAV}
                      role="group"
                      aria-labelledby={headingId}
                    >
                      {renderMenuItems(group.items)}
                    </ul>
                  </React.Fragment>
                );
              })}
            </div>
          ))
        )}
      </div>
      {!tilesBeforeGrid ? renderMenuTiles(tiles) : null}
    </>
  );
};

export const Megamenu = ({
  className,
  title = "Človek",
  notSticky = false,
  searchEmpty,
  searchFilled,
  compactLogoOnly = false,
  isB2B = false,
  isLoggedIn = true,
  cartItems,
  cartHasItems = false,
  tiles = megamenuTiles,
}: MegamenuProps) => {
  const ids = getMegamenuIds("main");
  const { hasSearchEmpty, hasSearchFilled, showSearchState, searchValue } =
    getMegamenuSearchState(searchEmpty, searchFilled);
  const hasCartItems = cartItems !== undefined && cartItems > 0;
  const showCartDot = cartHasItems && !hasCartItems;

  return (
    <header>
      <nav
        className={cx(CLASS_ROOT, className, {
          "non-sticky": notSticky,
        })}
        data-megamenu
        aria-label="Main navigation"
      >
        <div
          className={cx(CLASS_TOP, CLASS_HIDE_MD_DOWN)}
          data-hide-when-sticky="true"
        >
          <div className={cx(CLASS_CONTAINER, CLASS_TOP_CONTENT)}>
            <ul
              className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
              aria-label="Zákaznícke a kontaktné odkazy"
            >
              <li className={CLASS_NAV_ITEM}>
                <a
                  href="/"
                  className={cx(CLASS_NAV_LINK, "is-active")}
                  aria-current="page"
                >
                  Pre vás
                </a>
              </li>
              <li className={CLASS_NAV_ITEM}>
                <a href="/" className={CLASS_NAV_LINK}>
                  Podnikatelia a malé firmy
                </a>
              </li>
              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_PUSH)}>
                <a href="/" className={CLASS_NAV_LINK}>
                  Velké firmy
                </a>
              </li>

              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_LEAD)}>
                <a href="/" className={CLASS_NAV_LINK}>
                  <MegamenuIcon
                    name="call"
                    width={20}
                    height={20}
                    className={CLASS_NAV_ICON}
                    aria-hidden="true"
                  />
                  Kontakt
                </a>
              </li>
            </ul>
            <ul
              className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL, CLASS_NAV_LOCALE)}
              aria-label="Výber jazyka"
            >
              <li className={CLASS_NAV_ITEM}>
                <a href="/" className={cx(CLASS_NAV_LINK, "is-active")}>
                  SK
                </a>
              </li>
              <li className={CLASS_NAV_ITEM}>
                <a href="/" className={CLASS_NAV_LINK}>
                  EN
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className={CLASS_MAIN}>
          <div className={CLASS_CONTAINER}>
            <ul className={CLASS_NAV} aria-label="Hlavné menu">
              <li
                className={cx(
                  CLASS_NAV_ITEM,
                  CLASS_NAV_ITEM_MAIN,
                  CLASS_NAV_ITEM_PUSH,
                )}
              >
                <MegamenuLogoLink
                  compactLogoOnly={compactLogoOnly}
                  title={title}
                />
              </li>
              {menuSections.map((section) => (
                <li
                  key={section.id}
                  className={cx(
                    CLASS_NAV_ITEM,
                    CLASS_NAV_ITEM_MAIN,
                    CLASS_HIDE_MD_DOWN,
                  )}
                >
                  <button
                    type="button"
                    className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
                    aria-controls={`megamenu-${section.id}`}
                    aria-expanded="false"
                    aria-haspopup="true"
                  >
                    {section.label}
                  </button>
                  <div
                    className={CLASS_NAV_DROPDOWN}
                    id={`megamenu-${section.id}`}
                  >
                    <div className={CLASS_CONTAINER}>
                      {renderMenuSectionGrid(
                        section,
                        "megamenu",
                        CLASS_CAPTION,
                        false,
                        tiles,
                      )}
                    </div>
                  </div>
                </li>
              ))}
              <li
                className={cx(
                  CLASS_NAV_ITEM,
                  CLASS_NAV_ITEM_MAIN,
                  CLASS_HIDE_MD_DOWN,
                )}
              >
                <a href="/" className={cx(CLASS_NAV_LINK)}>
                  Akcie
                </a>
              </li>
              <li
                className={cx(
                  CLASS_NAV_ITEM,
                  CLASS_NAV_ITEM_MAIN,
                  CLASS_HIDE_MD_DOWN,
                )}
              >
                <a href="/" className={cx(CLASS_NAV_LINK)}>
                  Pomoc
                </a>
              </li>
              <li
                className={cx(
                  CLASS_NAV_ITEM,
                  CLASS_NAV_ITEM_MAIN,
                  CLASS_NAV_ITEM_PUSH,
                  CLASS_HIDE_MD_DOWN,
                )}
              >
                <a href="/" className={CLASS_NAV_LINK_CTA}>
                  <MegamenuIcon
                    width={16}
                    height={16}
                    name="rewards"
                    className={CLASS_NAV_ICON_CTA}
                    aria-hidden="true"
                  />
                  Prejdite k nám
                </a>
              </li>

              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
                <button
                  type="button"
                  className={CLASS_NAV_BUTTON}
                  aria-label="Vyhľadávanie"
                  aria-controls={ids.searchDropdownId}
                  aria-expanded="false"
                  aria-haspopup="true"
                >
                  <MegamenuIcon
                    width={24}
                    height={24}
                    name="search"
                    aria-hidden="true"
                  />
                </button>

                <MegamenuSearchDropdown
                  dropdownId={ids.searchDropdownId}
                  inputId={ids.searchInputDesktopId}
                  inputLabel="Vyhľadávanie v hlavnom menu"
                  searchValue={searchValue}
                  hasSearchEmpty={hasSearchEmpty}
                  hasSearchFilled={hasSearchFilled}
                  emptyStateLinkHref="/"
                />
              </li>
              <li className={cx(CLASS_NAV_ITEM)}>
                <a
                  href="/"
                  className={cx(CLASS_NAV_LINK)}
                  aria-label={
                    hasCartItems ? `Košík, ${cartItems} položka` : "Košík"
                  }
                >
                  {hasCartItems ? (
                    <span
                      className={CLASS_NAV_CART_ICON}
                      data-items-in-cart={cartItems}
                      aria-hidden="true"
                    >
                      <MegamenuIcon
                        width={24}
                        height={24}
                        name="buy"
                        aria-hidden="true"
                      />
                    </span>
                  ) : (
                    <span
                      className={CLASS_NAV_CART_ICON}
                      data-cart-has-items={showCartDot ? "true" : undefined}
                      aria-hidden="true"
                    >
                      <MegamenuIcon
                        width={24}
                        height={24}
                        name="buy"
                        aria-hidden="true"
                      />
                    </span>
                  )}
                  {hasCartItems ? (
                    <span className="sr-only">
                      {cartItems} položka v košíku
                    </span>
                  ) : null}
                </a>
              </li>
              <li className={CLASS_NAV_ITEM}>
                <button
                  type="button"
                  className={CLASS_NAV_BUTTON}
                  data-megamenu-mobile-toggle
                  data-megamenu-mobile-target="my-orange"
                  aria-haspopup="dialog"
                  aria-expanded="false"
                >
                  <MegamenuIcon
                    width={24}
                    height={24}
                    name="user"
                    className={CLASS_NAV_ICON}
                    aria-hidden="true"
                  />
                  Môj Orange
                </button>
              </li>
              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
                <button
                  type="button"
                  className={CLASS_NAV_BUTTON}
                  aria-label="Otvoriť menu"
                  data-megamenu-mobile-toggle
                  data-megamenu-mobile-target="main"
                  aria-haspopup="dialog"
                  aria-expanded="false"
                >
                  <MegamenuIcon
                    width={24}
                    height={24}
                    name="menu"
                    aria-hidden="true"
                  />
                </button>
              </li>
            </ul>
          </div>
        </div>

        {/* MOBILE MENU */}

        <MegamenuMobilePanel
          panelId={ids.mobileMainPanelId}
          titleId={ids.mobileMainTitleId}
          target="main"
          title="Hlavné menu"
          overlayAriaLabel="Zatvoriť menu"
        >
          <div className={CLASS_MOBILE_HEADER}>
            <div className={CLASS_CONTAINER}>
              <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
                <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_PUSH)}>
                  <div
                    className={cx(
                      CLASS_NAV_BUTTON,
                      CLASS_NAV_BUTTON_INDICATOR,
                      CLASS_NAV_SELECT_WRAPPER,
                    )}
                  >
                    <select
                      className={CLASS_NAV_SELECT}
                      defaultValue="/"
                      aria-label="Vyberte typ zákazníka"
                    >
                      <option value="/">Pre vás</option>
                      <option value="/">Podnikatelia a malé firmy</option>
                      <option value="/">Velké firmy</option>
                    </select>
                  </div>
                </li>

                <li className={CLASS_NAV_ITEM}>
                  <MegamenuCloseButton
                    ariaLabel="Zatvoriť menu"
                    target="main"
                  />
                </li>
              </ul>
            </div>
          </div>
          <div className={CLASS_MOBILE_BODY}>
            <div className={CLASS_CONTAINER}>
              <MegamenuSearchContent
                inputId={ids.searchInputMobileId}
                inputLabel="Vyhľadávanie v mobilnom menu"
                searchValue={searchValue}
                hasSearchEmpty={hasSearchEmpty}
                hasSearchFilled={hasSearchFilled}
              />
            </div>

            <div className={CLASS_CONTAINER}>
              {!showSearchState ? (
                <>
                  <ul className={CLASS_ACCORDION}>
                    {menuSections.map((section) => {
                      const accordionId = `mobile-accordion-${section.id}`;
                      const buttonId = `mobile-${section.id}-button`;

                      return (
                        <li className={CLASS_ACCORDION_ITEM} key={section.id}>
                          <div className={CLASS_ACCORDION_HEADER}>
                            <button
                              type="button"
                              className={CLASS_ACCORDION_BUTTON}
                              aria-controls={accordionId}
                              aria-expanded="false"
                              data-accordion-toggle
                              id={buttonId}
                            >
                              <span className={CLASS_ACCORDION_TITLE}>
                                {section.label}
                              </span>
                              <MegamenuIcon
                                name="chevron-right"
                                width={24}
                                height={24}
                                className={CLASS_ACCORDION_ICON}
                                aria-hidden="true"
                              />
                            </button>
                          </div>
                          <div
                            className={CLASS_ACCORDION_BODY}
                            id={accordionId}
                            role="region"
                            aria-labelledby={buttonId}
                          >
                            {renderMenuSectionGrid(
                              section,
                              "mobile",
                              CLASS_CAPTION,
                              true,
                              tiles,
                              true,
                            )}
                          </div>
                        </li>
                      );
                    })}

                    <li className={CLASS_ACCORDION_ITEM}>
                      <div className={CLASS_ACCORDION_HEADER}>
                        <a href="/" className={CLASS_ACCORDION_BUTTON}>
                          <span className={CLASS_ACCORDION_TITLE}>Akcie</span>
                        </a>
                      </div>
                    </li>

                    <li className={CLASS_ACCORDION_ITEM}>
                      <div className={CLASS_ACCORDION_HEADER}>
                        <a href="/" className={CLASS_ACCORDION_BUTTON}>
                          <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
                        </a>
                      </div>
                    </li>
                  </ul>
                </>
              ) : null}
            </div>

            {!showSearchState ? (
              <>
                <div className={CLASS_CONTAINER}>
                  <div className={CLASS_MOBILE_CTA}>
                    <a href="/" className={CLASS_NAV_LINK_CTA}>
                      <MegamenuIcon
                        width={16}
                        height={16}
                        name="rewards"
                        className={CLASS_NAV_ICON_CTA}
                        aria-hidden="true"
                      />
                      Prejdite k nám
                    </a>
                  </div>
                </div>

                <div className={CLASS_CONTAINER}>
                  <h3 id="mobile-quick-access-heading" className="sr-only">
                    Rýchly prístup
                  </h3>
                  <ul
                    className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}
                    role="group"
                    aria-labelledby="mobile-quick-access-heading"
                  >
                    <li className={CLASS_NAV_ITEM}>
                      <button
                        type="button"
                        className={CLASS_NAV_BUTTON}
                        data-megamenu-mobile-toggle
                        data-megamenu-mobile-target="my-orange"
                        aria-haspopup="dialog"
                        aria-expanded="false"
                      >
                        <MegamenuIcon
                          width={24}
                          height={24}
                          name="user"
                          className={CLASS_NAV_ICON}
                          aria-hidden="true"
                        />
                        Môj Orange
                      </button>
                    </li>
                    <li className={CLASS_NAV_ITEM}>
                      <a href="/" className={CLASS_NAV_BUTTON}>
                        <MegamenuIcon
                          width={24}
                          height={24}
                          name="call"
                          className={CLASS_NAV_ICON}
                          aria-hidden="true"
                        />
                        Kontakt
                      </a>
                    </li>
                    <li className={CLASS_NAV_ITEM}>
                      <a href="/" className={CLASS_NAV_BUTTON}>
                        <MegamenuIcon
                          width={24}
                          height={24}
                          name="advertising"
                          className={CLASS_NAV_ICON}
                          aria-hidden="true"
                        />
                        Akcie
                      </a>
                    </li>
                    <li className={CLASS_NAV_ITEM}>
                      <a href="/" className={CLASS_NAV_BUTTON}>
                        <MegamenuIcon
                          width={24}
                          height={24}
                          name="newspaper"
                          className={CLASS_NAV_ICON}
                          aria-hidden="true"
                        />
                        Pomoc
                      </a>
                    </li>
                  </ul>
                </div>

                <div className={CLASS_CONTAINER}>
                  <ul
                    className={cx(
                      CLASS_NAV,
                      CLASS_NAV_SPACE_SMALL,
                      CLASS_NAV_MOBILE_LOCALE,
                    )}
                    aria-label="Výber jazyka"
                  >
                    <li className={CLASS_NAV_ITEM}>
                      <a
                        href="/"
                        className={cx(
                          CLASS_NAV_LINK,
                          CLASS_NAV_LINK_LOCALE,
                          "is-active",
                        )}
                      >
                        SK
                      </a>
                    </li>
                    <li className={CLASS_NAV_ITEM}>
                      <a
                        href="/"
                        className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_LOCALE)}
                      >
                        EN
                      </a>
                    </li>
                  </ul>
                </div>
              </>
            ) : null}
          </div>
        </MegamenuMobilePanel>

        <MyOrangeMobilePanel
          panelId={ids.myOrangePanelId}
          titleId={ids.myOrangeTitleId}
          isB2B={isB2B}
          isLoggedIn={isLoggedIn}
        />

        <button
          aria-label="Zatvoriť dropdown menu"
          className={CLASS_OVERLAY}
          type="button"
        />
      </nav>
      <div className={CLASS_SPACER} aria-hidden="true" />
    </header>
  );
};