import { useMsal } from "@azure/msal-react";
import { loginRequest } from "common/msalConfig";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { getTranslationID } from "translation";
import Header from "components/header";
import Footer from "components/footer";
import { AppDispatch } from "app/store";
import { useDispatch } from "react-redux";
import { closeSnackbar, openSnackbar } from "features/ui";
import { useLocation, useNavigate } from "react-router-dom";
import styles from "styles/app.module.scss";
import { LANGUAGE_LIST } from "../../features/top/constants";
import arrow_forward from "../../assets/images/arrow_forward.svg";
import arrow_forward_bule from "../../assets/images/arrow_forward_blue.svg";
import oDMScloud from "../../assets/images/ODMScloud.png";

const TopPage: React.FC = (): JSX.Element => {
  const { instance } = useMsal();
  // eslint-disable-next-line
  const [t, i18n] = useTranslation();
  const dispatch: AppDispatch = useDispatch();
  const { search } = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    const query = new URLSearchParams(search);
    const logout = query.get("logout");
    if (logout) {
      dispatch(closeSnackbar());
      dispatch(
        openSnackbar({
          level: "error",
          message: getTranslationID("topPage.message.logout"),
        })
      );
      navigate("/", { replace: true });
    }
  }, [dispatch, search, navigate]);

  return (
    <div className={`${styles.wrap} ${styles.home}`}>
      <Header />

      <main className={`${styles.main} ${styles.home}`}>
        <section className={`${styles.pgHome}`}>
          <p className={styles.ODMSlogo}>
            <img
              src={`${oDMScloud}?0609`}
              alt={t(getTranslationID("topPage.label.logoAlt"))}
            />
          </p>
          <div>
            <dl className={`${styles.pgHomeLinks}`}>
              <dt>
                {`${t(getTranslationID("topPage.label.displayLanguage"))} :`}
              </dt>
              <dd className={`${styles.marginBtm3}`}>
                <select
                  className={`${styles.formInput}`}
                  value={i18n.language}
                  onChange={(e) => {
                    i18n.changeLanguage(e.currentTarget.value);
                    // 既にcookieに選択言語があれば削除
                    document.cookie = "language=; max-age=0";
                    // cookieの期限は1年
                    document.cookie = `language=${e.currentTarget.value}; max-age=31536000`;
                  }}
                >
                  {LANGUAGE_LIST.map((x) => (
                    <option key={x.value} value={x.value}>
                      {t(x.label)}
                    </option>
                  ))}
                </select>
              </dd>
              <dt>{t(getTranslationID("topPage.label.alreadyHaveAccount"))}</dt>
              <dd className={`${styles.marginBtm2}`}>
                {/* eslint-disable */}
                <a
                  className={`${styles.buttonNormal}`}
                  onClick={() => {
                    // AADB2Cのサインイン画面に言語選択情報を渡す追加のクエリパラメータを設定
                    loginRequest.extraQueryParameters = {
                      ui_locales: i18n.language,
                    };
                    instance.loginRedirect(loginRequest);
                  }}
                  data-tag="signin"
                >
                  {t(getTranslationID("topPage.label.signInButton"))}
                  <img
                    src={arrow_forward}
                    alt=""
                    className={`${styles.buttonIcon}`}
                  />
                </a>
              </dd>
              <dt>{t(getTranslationID("topPage.label.newUser"))}</dt>
              <dd className={`${styles.marginBtm1}`}>
                <a href="/signup" className={`${styles.buttonBase}`}>
                  {t(getTranslationID("topPage.label.signUpButton"))}
                  <img
                    src={arrow_forward_bule}
                    alt=""
                    className={`${styles.buttonIcon}`}
                  />
                </a>
              </dd>
            </dl>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default TopPage;