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,
  CLASS_MOBILE_BODY,
  CLASS_MOBILE_HEADER,
  CLASS_MOBILE_OVERLAY,
  CLASS_MOBILE_WRAPPER,
  CLASS_NAV,
  CLASS_NAV_BUTTON,
  CLASS_NAV_BUTTON_INDICATOR,
  CLASS_NAV_CART_ICON,
  CLASS_NAV_DROPDOWN,
  CLASS_NAV_ICON,
  CLASS_NAV_ITEM,
  CLASS_NAV_ITEM_LEAD,
  CLASS_NAV_ITEM_MAIN,
  CLASS_NAV_LINK,
  CLASS_NAV_LINK_LOCALE,
  CLASS_NAV_LOGO,
  CLASS_NAV_MOBILE_LOCALE,
  CLASS_NAV_SPACE_SMALL,
  CLASS_NAV_SPACER,
  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_TOP,
} from "./constants";
import { MenuItem, MenuSection, menuSections } from "./data";
import { getMegamenuIds } from "./ids";
import { MegamenuIcon } from "./MegaMenuIcon";
import { MegamenuSearchContent } from "./MegamenuSearchContent";
import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";

export type MegamenuProps = {
  className?: string;
  title?: string;
  isSticky?: boolean;
  searchEmpty?: boolean;
  searchFilled?: boolean;
};

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 renderMenuSectionGrid = (
  section: MenuSection,
  idPrefix: string,
  captionClass: string,
  mergeColumnsToSingleCard = false,
) => {
  const featuredHeadingId = `${idPrefix}-${section.id}-${section.featured.id}`;

  return (
    <div className={CLASS_GRID}>
      <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>
  );
};

export const Megamenu = ({
  className,
  title = "Človek",
  isSticky = true,
  searchEmpty,
  searchFilled,
}: MegamenuProps) => {
  const ids = getMegamenuIds("main");
  const hasSearchEmpty = Boolean(searchEmpty);
  const hasSearchFilled = Boolean(searchFilled);
  const showSearchState = hasSearchEmpty || hasSearchFilled;
  const searchValue = hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "";

  return (
    <header>
      <nav
        className={cx(CLASS_ROOT, className, {
          "is-sticky": isSticky,
        })}
        data-megamenu
        aria-label="Main navigation"
      >
        <div
          className={cx(CLASS_TOP, CLASS_HIDE_MD_DOWN)}
          data-hide-when-sticky="true"
        >
          <div className={CLASS_CONTAINER}>
            <ul
              className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
              aria-label="Top menu"
            >
              <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}>
                  Pre biznis
                </a>
              </li>

              <li className={CLASS_NAV_SPACER} aria-hidden="true"></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>
              <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)}>
                <a
                  href="/"
                  className={CLASS_NAV_LOGO}
                  aria-label={`${title} - Domovská stránka`}
                >
                  <svg
                    viewBox="0 0 40 40"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true"
                  >
                    <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
                    <path
                      d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
                      fill="white"
                    />
                  </svg>
                </a>
              </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,
                      )}
                    </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={CLASS_NAV_SPACER} aria-hidden="true"></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>

                <div
                  className={cx(CLASS_NAV_DROPDOWN, "is-spaced")}
                  id={ids.searchDropdownId}
                >
                  <div className={CLASS_CONTAINER}>
                    <MegamenuSearchContent
                      inputId={ids.searchInputDesktopId}
                      inputLabel="Vyhľadávanie v hlavnom menu"
                      searchValue={searchValue}
                      hasSearchEmpty={hasSearchEmpty}
                      hasSearchFilled={hasSearchFilled}
                      emptyStateLinkHref="/"
                    />
                  </div>
                </div>
              </li>
              <li className={cx(CLASS_NAV_ITEM)}>
                <a
                  href="/"
                  className={cx(CLASS_NAV_LINK)}
                  aria-label="Košík, 1 položka"
                >
                  <span
                    className={CLASS_NAV_CART_ICON}
                    data-items-in-cart="1"
                    aria-hidden="true"
                  >
                    <MegamenuIcon
                      width={24}
                      height={24}
                      name="buy"
                      aria-hidden="true"
                    />
                  </span>
                  <span className="sr-only">1 položka v košíku</span>
                </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 */}

        <div
          // className={cx(CLASS_MOBILE, "is-active")}
          className={cx(CLASS_MOBILE)}
          data-megamenu-mobile-panel="main"
          id={ids.mobileMainPanelId}
          role="dialog"
          aria-modal="true"
          aria-labelledby={ids.mobileMainTitleId}
          aria-hidden="true"
        >
          <span id={ids.mobileMainTitleId} className="sr-only">
            Hlavné menu
          </span>
          <button
            aria-label="Zatvoriť menu"
            className={CLASS_MOBILE_OVERLAY}
            type="button"
          />

          <div className={CLASS_MOBILE_WRAPPER}>
            <div className={CLASS_MOBILE_HEADER}>
              <div className={CLASS_CONTAINER}>
                <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
                  <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}>
                      Pre biznis
                    </a>
                  </li>

                  <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>

                  <li className={CLASS_NAV_ITEM}>
                    <button
                      type="button"
                      data-megamenu-close-button
                      data-megamenu-mobile-target="main"
                      className={CLASS_NAV_BUTTON}
                      aria-label="Zatvoriť menu"
                    >
                      <MegamenuIcon
                        name="close"
                        width={20}
                        height={20}
                        aria-hidden="true"
                      />
                    </button>
                  </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}
                />

                {!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,
                              )}
                            </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>

                    <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>
                  </>
                ) : null}
              </div>

              {!showSearchState ? (
                <>
                  <hr className="mt-none" />
                  <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>
                </>
              ) : null}
            </div>
          </div>
        </div>

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

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