import cx from "classnames";
import { BrandMark } from "./BrandMark";
import {
  CLASS_CAPTION,
  CLASS_CONTAINER,
  CLASS_HIDE_LG_UP,
  CLASS_HIDE_MD_DOWN,
  CLASS_LIST_GAP_SMALL,
  CLASS_LIST_INLINE,
  CLASS_MAIN,
  CLASS_MOBILE,
  CLASS_MOBILE_BODY,
  CLASS_MOBILE_HEADER,
  CLASS_MOBILE_OVERLAY,
  CLASS_MOBILE_WRAPPER,
  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_LINK,
  CLASS_NAV_LINK_NO_LINE,
  CLASS_NAV_LOGO,
  CLASS_NAV_SPACE_SMALL,
  CLASS_NAV_SPACER,
  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 { Logo } from "./Logo";
import { MegamenuIcon } from "./MegaMenuIcon";
import { MegamenuProps } from "./Megamenu";
import { MegamenuSearchContent } from "./MegamenuSearchContent";
import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";

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

export const MegamenuBlog = ({
  className,
  title = "Človek",
  isSticky = true,
  searchEmpty,
  searchFilled,
  compactLogoOnly = false,
}: MegamenuProps) => {
  const ids = getMegamenuIds("blog");
  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={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`}
                >
                  {compactLogoOnly ? <Logo /> : <BrandMark />}
                  <span>{title}</span>
                </a>
              </li>

              <li
                className={cx(
                  CLASS_NAV_ITEM,
                  CLASS_NAV_ITEM_MAIN,
                  CLASS_HIDE_MD_DOWN,
                )}
              >
                <a
                  href="/"
                  className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_NO_LINE)}
                >
                  Naspať na Orange
                </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 blog menu"
                      searchValue={searchValue}
                      hasSearchEmpty={hasSearchEmpty}
                      hasSearchFilled={hasSearchFilled}
                    />
                  </div>
                </div>
              </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 */}

        <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={CLASS_NAV_LOGO}
                      aria-label={`${title} - Domovská stránka`}
                    >
                      {compactLogoOnly ? <Logo /> : <BrandMark />}
                      <span>{title}</span>
                    </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 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>
          </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_SMALL} aria-hidden="true" />
    </header>
  );
};
