import { useMsal } from "@azure/msal-react";
import { AppDispatch } from "app/store";
import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
import Footer from "components/footer";
import Header from "components/header";
import { clearToken } from "features/auth";
import React, { useCallback, useState } from "react";
import { useDispatch } from "react-redux";
import styles from "styles/app.module.scss";
import { loadAccessToken, isApproveTier } from "features/auth/utils";
import postAdd from "../../assets/images/post_add.svg";
import { decodeToken } from "../../common/decodeToken";
import { TIERS } from "../../components/auth/constants";
import { AddPartnerAccountPopup } from "./addPartnerAccountPopup";

const PartnerPage: React.FC = (): JSX.Element => {
  const { instance } = useMsal();
  const dispatch: AppDispatch = useDispatch();
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  /* XXX 本実装の際に消す想定です。
  POデモ時に階層情報を表示するための実装です。 */
  const getUserTier = () => {
    const jwt = loadAccessToken(); // トークンを取得
    const token = jwt && decodeToken(jwt); // トークンをデコード

    if (token && token.tier) {
      return token.tier.toString(); // ユーザーの階層情報を取得
    }

    return "error!"; // 階層情報が見つからない場合はerror!を返す
  };

  /* XXX 本実装の際に消す想定です。
  ログインしているアカウントの階層を確認するために実装 */
  const userTier = getUserTier();
  // 第1～3階層にボタンを表示する
  const isVisible = isApproveTier([TIERS.TIER1, TIERS.TIER2, TIERS.TIER3]);
  const onOpen = useCallback(() => {
    setIsPopupOpen(true);
  }, [setIsPopupOpen]);
  // HTML
  return (
    <>
      <AddPartnerAccountPopup
        isOpen={isPopupOpen}
        onClose={() => {
          setIsPopupOpen(false);
        }}
      />
      <div className={styles.wrap}>
        <Header userName="XXXXXX" />
        <UpdateTokenTimer />
        <main className={styles.main}>
          <ul className={styles.menuAction}>
            <li>
              {isVisible && (
                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                <a
                  className={`${styles.menuLink} ${styles.isActive}`}
                  onClick={onOpen}
                >
                  <img src={postAdd} alt="" className={styles.menuIcon} />
                  Add Account
                </a>
              )}
            </li>
          </ul>
          <form className={styles.form}>
            <dl className={`${styles.formList} ${styles.hasbg}`}>
              <dt className={styles.formTitle} />
              <dt />
              <dd className="">
                <input
                  type="text"
                  size={40}
                  name=""
                  value={`Tier:${userTier}`}
                  maxLength={20}
                  className={styles.formInput}
                />
              </dd>
            </dl>
          </form>
        </main>
        <div>
          <button
            type="button"
            className={styles.buttonText}
            onClick={() => {
              instance.logout({ postLogoutRedirectUri: "/" });
              dispatch(clearToken());
            }}
          >
            sign out
          </button>
        </div>
        <Footer />
      </div>
    </>
  );
};
export default PartnerPage;
