import cx from "classnames";
import {
  CLASS_CONTAINER,
  CLASS_MOBILE,
  CLASS_MOBILE_ACCOUNT,
  CLASS_MOBILE_ACCOUNT_AVATAR,
  CLASS_MOBILE_ACCOUNT_CTA,
  CLASS_MOBILE_ACCOUNT_LINK,
  CLASS_MOBILE_ACCOUNT_LINKS,
  CLASS_MOBILE_ACCOUNT_LOGOUT,
  CLASS_MOBILE_ACCOUNT_NAME,
  CLASS_MOBILE_ACCOUNT_PHONE,
  CLASS_MOBILE_BODY,
  CLASS_MOBILE_HEADER,
  CLASS_MOBILE_OVERLAY,
  CLASS_MOBILE_WRAPPER,
  CLASS_NAV,
  CLASS_NAV_BUTTON,
  CLASS_NAV_ITEM,
  CLASS_NAV_SPACE_SMALL,
  CLASS_NAV_SPACER,
  CLASS_SUBNAV,
  CLASS_SUBNAV_ITEM,
} from "./constants";
import { MegamenuIcon } from "./MegaMenuIcon";

type MyOrangeMobilePanelProps = {
  titleId: string;
  panelId?: string;
};

export const MyOrangeMobilePanel = ({
  titleId,
  panelId,
}: MyOrangeMobilePanelProps) => {
  return (
    <div
      className={cx(CLASS_MOBILE)}
      data-megamenu-mobile-panel="my-orange"
      id={panelId}
      role="dialog"
      aria-modal="true"
      aria-labelledby={titleId}
      aria-hidden="true"
    >
      <h2 id={titleId} className="sr-only">
        Môj Orange
      </h2>
      <button
        aria-label="Zatvoriť panel Môj Orange"
        className={CLASS_MOBILE_OVERLAY}
        type="button"
        data-megamenu-close-button
        data-megamenu-mobile-target="my-orange"
      />

      <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_SPACER} aria-hidden="true"></li>
              <li className={CLASS_NAV_ITEM}>
                <button
                  type="button"
                  data-megamenu-close-button
                  data-megamenu-mobile-target="my-orange"
                  className={CLASS_NAV_BUTTON}
                  aria-label="Zatvoriť panel Môj Orange"
                >
                  <MegamenuIcon
                    name="close"
                    width={20}
                    height={20}
                    aria-hidden="true"
                  />
                </button>
              </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>
              <p className={CLASS_MOBILE_ACCOUNT_NAME}>Martin Prihlásený</p>
              <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
              <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
                Odhlásiť
              </a>
              <a href="#" className={CLASS_MOBILE_ACCOUNT_CTA}>
                My Orange
              </a>
            </div>

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