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 {
  getLicenseSummaryAsync,
  selecLicenseSummaryInfo,
} from "features/license/licenseSummary";
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 { LicenseOrderPopup } from "./licenseOrderPopup";
import { CardLicenseActivatePopup } from "./cardLicenseActivatePopup";
// eslint-disable-next-line import/no-named-as-default
import LicenseOrderHistory from "./licenseOrderHistory";

const LicenseSummary: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();

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

  useEffect(() => {
    dispatch(getLicenseSummaryAsync());
  }, [dispatch]);

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

          <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>
                  <h2 className="">
                    {t(getTranslationID("LicenseSummaryPage.label.subTitle"))}
                  </h2>
                  <ul className={styles.menuAction}>
                    <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={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>
                      {/* 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>
                  <dl className={`${styles.listVertical} ${styles.marginBtm5}`}>
                    <dt>
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.totalLicense"
                        )
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.totalLicense}</dd>
                    <dt>
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.allocatedLicense"
                        )
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.allocatedLicense}</dd>
                    <dt>
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.reusableLicense"
                        )
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.reusableLicense}</dd>
                    <dt>
                      {t(
                        getTranslationID("LicenseSummaryPage.label.freeLicense")
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.freeLicense}</dd>
                    <dt>
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.expiringWithin14daysLicense"
                        )
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.expiringWithin14daysLicense}</dd>
                    <dt>
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.issueRequesting"
                        )
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.issueRequesting}</dd>
                    <dt>
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.numberOfRequesting"
                        )
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.numberOfRequesting}</dd>
                    <dt>
                      {t(getTranslationID("LicenseSummaryPage.label.shortage"))}
                    </dt>
                    <dd>{licenseSummaryInfo.shortage}</dd>
                    <dt>
                      {t(
                        getTranslationID("LicenseSummaryPage.label.storageSize")
                      )}
                    </dt>
                    <dd>{licenseSummaryInfo.storageSize}GB</dd>
                    <dt>
                      {t(getTranslationID("LicenseSummaryPage.label.usedSize"))}
                    </dt>
                    <dd>{licenseSummaryInfo.usedSize}GB</dd>
                    <dt>
                      {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>
              </section>
            </div>
          </main>
          <Footer />
        </div>
      )}
    </>
  );
};

export default LicenseSummary;
