import cx from "classnames";
import {
  CLASS_BUTTON,
  CLASS_BUTTON_SECONDARY,
  CLASS_CONTAINER,
  CLASS_MOBILE_ACCOUNT,
  CLASS_MOBILE_ACCOUNT_AVATAR,
  CLASS_MOBILE_ACCOUNT_LINK,
  CLASS_MOBILE_ACCOUNT_LINKS,
  CLASS_MOBILE_ACCOUNT_LOGOUT,
  CLASS_MOBILE_ACCOUNT_PHONE,
  CLASS_MOBILE_APP_CARD,
  CLASS_MOBILE_APP_CARD_IMAGE,
  CLASS_MOBILE_APP_CARD_SECTION,
  CLASS_MOBILE_APP_CARD_STORE,
  CLASS_MOBILE_APP_CARD_STORES,
  CLASS_MOBILE_APP_CARD_TITLE,
  CLASS_MOBILE_BODY,
  CLASS_MOBILE_HEADER,
  CLASS_NAV,
  CLASS_NAV_ITEM,
  CLASS_NAV_ITEM_PUSH,
  CLASS_NAV_SPACE_SMALL,
  CLASS_SUBNAV,
  CLASS_SUBNAV_ITEM,
} from "./constants";
import { MegamenuIcon } from "./MegaMenuIcon";
import { MegamenuCloseButton, MegamenuMobilePanel } from "./shared";

type MyOrangeMobilePanelProps = {
  titleId: string;
  panelId?: string;
  isB2B?: boolean;
  isLoggedIn?: boolean;
};

export const MyOrangeMobilePanel = ({
  titleId,
  panelId,
  isB2B = false,
  isLoggedIn = true,
}: MyOrangeMobilePanelProps) => {
  return (
    <MegamenuMobilePanel
      titleId={titleId}
      panelId={panelId}
      target="my-orange"
      title="Môj Orange"
      overlayAriaLabel="Zatvoriť panel Môj Orange"
    >
      <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)}>
              <MegamenuCloseButton
                ariaLabel="Zatvoriť panel Môj Orange"
                target="my-orange"
              />
            </li>
          </ul>
        </div>
      </div>
      <div className={CLASS_MOBILE_BODY}>
        <div className={CLASS_CONTAINER}>
          <div className={CLASS_MOBILE_ACCOUNT}>
            <div className={CLASS_MOBILE_ACCOUNT_AVATAR} aria-hidden="true">
              <MegamenuIcon name="user" width={72} height={72} />
            </div>
            {isLoggedIn ? (
              <>
                <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
                <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
                  Odhlásiť
                </a>
                <a href="#" className={CLASS_BUTTON}>
                  Orange Business
                </a>
                {isB2B ? (
                  <a
                    href="#"
                    className={cx(CLASS_BUTTON, CLASS_BUTTON_SECONDARY)}
                  >
                    My Orange
                  </a>
                ) : null}
              </>
            ) : (
              <a href="#" className={CLASS_BUTTON}>
                Prihlásenie
              </a>
            )}
          </div>
        </div>

        <div className={CLASS_CONTAINER}>
          <nav aria-label="Môj Orange rýchle akcie">
            <ul className={cx(CLASS_SUBNAV, CLASS_MOBILE_ACCOUNT_LINKS)}>
              <li className={CLASS_SUBNAV_ITEM}>
                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
                  Zaplatiť faktúru
                </a>
              </li>
              <li className={CLASS_SUBNAV_ITEM}>
                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
                  Pozrieť spotrebu
                </a>
              </li>
              <li className={CLASS_SUBNAV_ITEM}>
                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
                  Aktivovať služby
                </a>
              </li>
              <li className={CLASS_SUBNAV_ITEM}>
                <a href="#" className={CLASS_MOBILE_ACCOUNT_LINK}>
                  Dobiť kredit
                </a>
              </li>
            </ul>
          </nav>
        </div>

        <div className={CLASS_CONTAINER}>
          <div className={cx(CLASS_MOBILE_APP_CARD)}>
            <div className={CLASS_MOBILE_APP_CARD_SECTION}>
              <h2 className={CLASS_MOBILE_APP_CARD_TITLE}>
                Stiahnite si aplikáciu
                <br />
                Môj Orange
              </h2>
              <div className={CLASS_MOBILE_APP_CARD_STORES}>
                <a
                  href="#"
                  className={CLASS_MOBILE_APP_CARD_STORE}
                  aria-label="Stiahnuť aplikáciu z App Store"
                >
                  <img
                    src={isB2B ? "/apple--white.svg" : "/apple.svg"}
                    alt=""
                  />
                </a>
                <a
                  href="#"
                  className={CLASS_MOBILE_APP_CARD_STORE}
                  aria-label="Stiahnuť aplikáciu z Google Play"
                >
                  <img src={isB2B ? "/play--white.svg" : "/play.svg"} alt="" />
                </a>
                <a
                  href="#"
                  className={CLASS_MOBILE_APP_CARD_STORE}
                  aria-label="Stiahnuť aplikáciu z Huawei AppGallery"
                >
                  <img
                    src={isB2B ? "/huawei--white.svg" : "/huawei.svg"}
                    alt=""
                  />
                </a>
              </div>
            </div>
            <img
              className={CLASS_MOBILE_APP_CARD_IMAGE}
              src="/images/phones.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </MegamenuMobilePanel>
  );
};