import cx from "classnames";
import {
  CLASS_CAPTION,
  CLASS_CONTAINER,
  CLASS_HIDE_LG_UP,
  CLASS_HIDE_MD_DOWN,
  CLASS_LIST_GAP_SMALL,
  CLASS_LIST_INLINE,
  CLASS_MAIN,
  CLASS_MOBILE_BODY,
  CLASS_MOBILE_HEADER,
  CLASS_NAV,
  CLASS_NAV_BUTTON,
  CLASS_NAV_DROPDOWN,
  CLASS_NAV_ICON,
  CLASS_NAV_ICON_NO_GAP_MD_DOWN,
  CLASS_NAV_ITEM,
  CLASS_NAV_ITEM_MAIN,
  CLASS_NAV_ITEM_PUSH,
  CLASS_NAV_LINK,
  CLASS_NAV_LINK_NO_LINE,
  CLASS_NAV_SPACE_SMALL,
  CLASS_NAV_VERTICAL,
  CLASS_OVERLAY,
  CLASS_ROOT,
  CLASS_SPACER_SMALL,
  CLASS_SUBNAV,
  CLASS_TAG,
  CLASS_TAG_LARGE,
  CLASS_TAG_TRANSPARENT,
} from "./constants";
import { getMegamenuIds } from "./ids";
import { MegamenuIcon } from "./MegaMenuIcon";
import type { MegamenuProps } from "./Megamenu";
import { MegamenuSearchContent } from "./MegamenuSearchContent";
import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
import {
  getMegamenuSearchState,
  MegamenuCloseButton,
  MegamenuLogoLink,
  MegamenuMobilePanel,
  MegamenuSearchDropdown,
} from "./shared";

const blogCategories = [
  "Kategória 1",
  "Kategória 2",
  "Kategória 3",
  "Kategória 4",
  "Kategória 5",
];

export const MegamenuBlog = ({
  className,
  title = "Človek",
  notSticky = false,
  searchEmpty,
  searchFilled,
  compactLogoOnly = false,
  isB2B = false,
}: MegamenuProps) => {
  const ids = getMegamenuIds("blog");
  const { hasSearchEmpty, hasSearchFilled, showSearchState, searchValue } =
    getMegamenuSearchState(searchEmpty, searchFilled);

  return (
    <header>
      <nav
        className={cx(CLASS_ROOT, className, {
          "non-sticky": notSticky,
        })}
        data-megamenu
        aria-label="Main navigation"
      >
        <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}
                >
                  <span>{title}</span>
                </MegamenuLogoLink>
              </li>

              <li
                className={cx(
                  CLASS_NAV_ITEM,
                  CLASS_NAV_ITEM_MAIN,
                  CLASS_NAV_ITEM_PUSH,
                  CLASS_HIDE_MD_DOWN,
                )}
              >
                <a
                  href="/"
                  className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_NO_LINE)}
                >
                  Naspať na Orange
                </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 blog menu"
                  searchValue={searchValue}
                  hasSearchEmpty={hasSearchEmpty}
                  hasSearchFilled={hasSearchFilled}
                />
              </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"
                  aria-label="Môj Orange"
                >
                  <MegamenuIcon
                    width={24}
                    height={24}
                    name="user"
                    className={cx(
                      CLASS_NAV_ICON,
                      CLASS_NAV_ICON_NO_GAP_MD_DOWN,
                    )}
                    aria-hidden="true"
                  />
                  <span className={CLASS_HIDE_MD_DOWN}>Môj Orange</span>
                </button>
              </li>

              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
                <button
                  type="button"
                  className={cx(
                    CLASS_NAV_BUTTON,
                    "megamenu__nav-button--toggle",
                  )}
                  aria-label="Kategórie"
                  aria-controls="megamenu-blog-categories"
                  aria-expanded="false"
                  aria-haspopup="true"
                >
                  <span className="megamenu__nav-button-icon-open">
                    <MegamenuIcon
                      width={24}
                      height={24}
                      name="menu"
                      aria-hidden="true"
                    />
                  </span>
                  <span className="megamenu__nav-button-icon-close">
                    <MegamenuIcon
                      width={24}
                      height={24}
                      name="close"
                      aria-hidden="true"
                    />
                  </span>
                </button>

                <div
                  className={cx(CLASS_NAV_DROPDOWN, "is-spaced")}
                  id="megamenu-blog-categories"
                >
                  <div className={CLASS_CONTAINER}>
                    <p className={CLASS_CAPTION}>Kategórie</p>
                    <ul className={CLASS_LIST_INLINE}>
                      {blogCategories.map((category) => (
                        <li key={category}>
                          <a
                            href="/"
                            className={cx(
                              CLASS_TAG,
                              CLASS_TAG_TRANSPARENT,
                              CLASS_TAG_LARGE,
                            )}
                          >
                            {category}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </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>

        {/* This is not needed, but I'll keep it here if anyone changes his mind to has it as part of megamenu */}
        {/* <div className={cx(CLASS_SUBMAIN, CLASS_HIDE_MD_DOWN)}>
        <div className={CLASS_CONTAINER}>
          <ul className={cx(CLASS_LIST_INLINE, CLASS_ALIGN_CENTER)}>
            <li>
              <a
                href="/"
                className={cx(
                  CLASS_TAG,
                  CLASS_TAG_TRANSPARENT,
                  CLASS_TAG_LARGE,
                )}
              >
                Všetky novinky
              </a>
            </li>
            <li>
              <a
                href="/"
                className={cx(
                  CLASS_TAG,
                  CLASS_TAG_TRANSPARENT,
                  CLASS_TAG_LARGE,
                )}
              >
                Konektivita
              </a>
            </li>
            <li>
              <a
                href="/"
                className={cx(
                  CLASS_TAG,
                  CLASS_TAG_TRANSPARENT,
                  CLASS_TAG_LARGE,
                )}
              >
                Technológie SMART
              </a>
            </li>
            <li>
              <a
                href="/"
                className={cx(
                  CLASS_TAG,
                  CLASS_TAG_TRANSPARENT,
                  CLASS_TAG_LARGE,
                )}
              >
                Bezpečnosť
              </a>
            </li>
            <li>
              <a
                href="/"
                className={cx(
                  CLASS_TAG,
                  CLASS_TAG_TRANSPARENT,
                  CLASS_TAG_LARGE,
                )}
              >
                Iné
              </a>
            </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)}>
                  <MegamenuLogoLink
                    compactLogoOnly={compactLogoOnly}
                    title={title}
                  >
                    <span>{title}</span>
                  </MegamenuLogoLink>
                </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 blog menu"
                searchValue={searchValue}
                hasSearchEmpty={hasSearchEmpty}
                hasSearchFilled={hasSearchFilled}
              />

              {!showSearchState ? (
                <>
                  <p className={CLASS_CAPTION}>Kategórie</p>
                  <ul className={cx(CLASS_SUBNAV, CLASS_LIST_GAP_SMALL)}>
                    {blogCategories.map((category) => (
                      <li key={category}>
                        <a
                          href="/"
                          className={cx(
                            CLASS_TAG,
                            CLASS_TAG_TRANSPARENT,
                            CLASS_TAG_LARGE,
                          )}
                        >
                          {category}
                        </a>
                      </li>
                    ))}
                  </ul>

                  <hr className="mt-none" />

                  <ul className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}>
                    <li className={CLASS_NAV_ITEM}>
                      <a href="/" className={CLASS_NAV_BUTTON}>
                        Naspať na Orange
                      </a>
                    </li>
                  </ul>
                </>
              ) : null}
            </div>
          </div>
        </MegamenuMobilePanel>

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

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