import React, { useCallback, useEffect, useState } from "react";
import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
import Footer from "components/footer";
import Header from "components/header";
import styles from "styles/app.module.scss";
import { getTranslationID } from "translation";
import { useTranslation } from "react-i18next";
import { AppDispatch } from "app/store";
import { useDispatch, useSelector } from "react-redux";
import {
  getCompanyNameAsync,
  getLicenseSummaryAsync,
  selecLicenseSummaryInfo,
  selectCompanyName,
} from "features/license/licenseSummary";
import { selectSelectedRow } from "features/license/partnerLicense";
import { selectDelegationAccessToken } from "features/auth/selectors";
import { DelegationBar } from "components/delegate";
import postAdd from "../../assets/images/post_add.svg";
import history from "../../assets/images/history.svg";
import key from "../../assets/images/key.svg";
import block from "../../assets/images/block.svg";
import circle from "../../assets/images/circle.svg";
import returnLabel from "../../assets/images/undo.svg";
import { LicenseOrderPopup } from "./licenseOrderPopup";
import { CardLicenseActivatePopup } from "./cardLicenseActivatePopup";
// eslint-disable-next-line import/no-named-as-default
import LicenseOrderHistory from "./licenseOrderHistory";

interface LicenseSummaryProps {
  onReturn?: () => void;
}
export const LicenseSummary: React.FC<LicenseSummaryProps> = (
  props
): JSX.Element => {
  const { onReturn } = props;
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
  const selectedRow = useSelector(selectSelectedRow);
  // 代行操作用のトークンを取得する
  const delegationAccessToken = useSelector(selectDelegationAccessToken);

  // popup制御関係
  const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false);
  const [isCardLicenseActivatePopupOpen, setIsCardLicenseActivatePopupOpen] =
    useState(false);

  const onlicenseOrderOpen = useCallback(() => {
    setIslicenseOrderPopupOpen(true);
  }, [setIslicenseOrderPopupOpen]);

  const onCardLicenseActivateOpen = useCallback(() => {
    setIsCardLicenseActivatePopupOpen(true);
  }, [setIsCardLicenseActivatePopupOpen]);

  // 呼び出し画面制御関係
  const [islicenseOrderHistoryOpen, setIsLicenseOrderHistoryOpen] =
    useState(false);

  const onLicenseOrderHistoryOpen = useCallback(() => {
    setIsLicenseOrderHistoryOpen(true);
  }, [setIsLicenseOrderHistoryOpen]);

  // apiからの値取得関係
  const licenseSummaryInfo = useSelector(selecLicenseSummaryInfo);
  const companyName = useSelector(selectCompanyName);

  useEffect(() => {
    dispatch(getLicenseSummaryAsync({ selectedRow }));
    dispatch(getCompanyNameAsync({ selectedRow }));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch]);

  // Return押下時の処理
  const returnClick = useCallback(() => {
    if (onReturn) {
      onReturn();
    }
  }, [onReturn]);

  return (
    <>
      {/* isPopupOpenがfalseの場合はポップアップのhtmlを生成しないように対応。これによりポップアップは都度生成されて初期化の考慮が減る */}
      {islicenseOrderPopupOpen && (
        <LicenseOrderPopup
          onClose={() => {
            setIslicenseOrderPopupOpen(false);
            dispatch(getLicenseSummaryAsync({ selectedRow }));
          }}
        />
      )}
      {isCardLicenseActivatePopupOpen && (
        <CardLicenseActivatePopup
          onClose={() => {
            setIsCardLicenseActivatePopupOpen(false);
          }}
        />
      )}
      {islicenseOrderHistoryOpen && (
        <LicenseOrderHistory
          onReturn={() => {
            setIsLicenseOrderHistoryOpen(false);
          }}
        />
      )}
      {!islicenseOrderHistoryOpen && (
        <div
          className={`${styles.wrap} ${
            delegationAccessToken ? styles.manage : ""
          }`}
        >
          {delegationAccessToken && <DelegationBar />}
          <Header />

          <UpdateTokenTimer />
          <main className={styles.main}>
            <div className="">
              <div className={styles.pageHeader}>
                <h1 className={styles.pageTitle}>
                  {t(getTranslationID("LicenseSummaryPage.label.title"))}
                </h1>
              </div>
              <section className={styles.license}>
                <div className={styles.boxFlex}>
                  <h2 className="">{companyName}</h2>
                  <ul className={`${styles.menuAction} ${styles.box100}`}>
                    <li>
                      {/* 他アカウントのライセンス情報を見ている場合は、前画面に戻る用のreturnボタンを表示 */}
                      {selectedRow && (
                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                        <a
                          className={`${styles.menuLink} ${styles.isActive}`}
                          onClick={returnClick}
                        >
                          <img
                            src={returnLabel}
                            alt=""
                            className={styles.menuIcon}
                          />
                          {t(getTranslationID("common.label.return"))}
                        </a>
                      )}
                    </li>
                    <li>
                      {/* 他アカウントのライセンス情報を見ている場合は、ライセンス注文ボタンを非表示 */}
                      {!selectedRow && (
                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                        <a
                          className={`${styles.menuLink} ${styles.isActive}`}
                          onClick={onlicenseOrderOpen}
                        >
                          <img
                            src={postAdd}
                            alt=""
                            className={styles.menuIcon}
                          />
                          {t(
                            getTranslationID(
                              "LicenseSummaryPage.label.orderLicense"
                            )
                          )}
                        </a>
                      )}
                    </li>
                    <li>
                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                      <a
                        className={`${styles.menuLink} ${styles.isActive}`}
                        onClick={onLicenseOrderHistoryOpen}
                      >
                        <img src={history} alt="" className={styles.menuIcon} />
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.orderHistory"
                          )
                        )}
                      </a>
                    </li>
                    <li>
                      {/* 他アカウントのライセンス情報を見ている場合は、カードライセンス取り込みボタンを非表示 */}
                      {!selectedRow && (
                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                        <a
                          className={`${styles.menuLink} ${styles.isActive}`}
                          onClick={onCardLicenseActivateOpen}
                        >
                          <img src={key} alt="" className={styles.menuIcon} />
                          {t(
                            getTranslationID(
                              "LicenseSummaryPage.label.activateLicenseKey"
                            )
                          )}
                        </a>
                      )}
                    </li>
                  </ul>
                  <div className={styles.marginRgt3}>
                    <dl
                      className={`${styles.listVertical} ${styles.marginBtm3}`}
                    >
                      <h4 className={styles.listHeader}>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.licenseLabel"
                          )
                        )}
                      </h4>
                      <dt>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.totalLicense"
                          )
                        )}
                      </dt>
                      <dd>{licenseSummaryInfo.totalLicense}</dd>
                      <dt>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.freeLicense"
                          )
                        )}
                      </dt>
                      <dd>{licenseSummaryInfo.freeLicense}</dd>
                      <dt>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.reusableLicense"
                          )
                        )}
                      </dt>
                      <dd>{licenseSummaryInfo.reusableLicense}</dd>
                      <dt>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.allocatedLicense"
                          )
                        )}
                      </dt>
                      <dd>{licenseSummaryInfo.allocatedLicense}</dd>
                      <dt>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.expiringWithin14daysLicense"
                          )
                        )}
                      </dt>
                      <dd>{licenseSummaryInfo.expiringWithin14daysLicense}</dd>
                      <dt>
                        {t(
                          getTranslationID("LicenseSummaryPage.label.shortage")
                        )}
                      </dt>
                      <dd>
                        <span
                          className={
                            licenseSummaryInfo.shortage > 0
                              ? styles.isAlert
                              : ""
                          }
                        >
                          {licenseSummaryInfo.shortage}
                        </span>
                      </dd>
                      <dt>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.issueRequesting"
                          )
                        )}
                      </dt>
                      <dd>{licenseSummaryInfo.issueRequesting}</dd>
                    </dl>
                  </div>
                  <div>
                    <dl
                      className={`${styles.listVertical} ${styles.marginBtm3}`}
                    >
                      <h4 className={styles.listHeader}>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.storageLabel"
                          )
                        )}
                      </h4>
                      <dt>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.storageSize"
                          )
                        )}
                      </dt>
                      {/* Storage Usedの値表示をハイフンに置き換え */}
                      {/* <dd>{licenseSummaryInfo.storageSize}GB</dd> */}
                      <dd>-</dd>
                      <dt>
                        {t(
                          getTranslationID("LicenseSummaryPage.label.usedSize")
                        )}
                      </dt>
                      {/* Storage Usedの値表示をハイフンに置き換え */}
                      {/* <dd>{licenseSummaryInfo.usedSize}GB</dd> */}
                      <dd>-</dd>
                      <dt className={styles.overLine}>
                        {t(
                          getTranslationID(
                            "LicenseSummaryPage.label.storageAvailable"
                          )
                        )}
                      </dt>
                      <dd>
                        {licenseSummaryInfo.isStorageAvailable && (
                          <img
                            src={block}
                            alt=""
                            className={styles.icInTable}
                          />
                        )}
                        {!licenseSummaryInfo.isStorageAvailable && (
                          <img
                            src={circle}
                            alt=""
                            className={styles.icInTable}
                          />
                        )}
                      </dd>
                    </dl>
                  </div>
                </div>
              </section>
            </div>
          </main>
          <Footer />
        </div>
      )}
    </>
  );
};

LicenseSummary.defaultProps = {
  onReturn: undefined,
};

export default LicenseSummary;
