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 styles from "styles/app.module.scss";
import { Link } from "react-router-dom";
import { clearToken } from "features/auth";
import { AppDispatch } from "app/store";
import { useDispatch } from "react-redux";
import { clearUserInfo } from "features/login";

export const AccountDeleteSuccess: React.FC = (): JSX.Element => {
  const { t } = useTranslation();
  const dispatch: AppDispatch = useDispatch();

  // アカウントの削除完了時に遷移するページなので、遷移と同時にログアウト状態とする
  useEffect(() => {
    dispatch(clearToken());
    dispatch(clearUserInfo());
  }, [dispatch]);

  return (
    <div className={styles.wrap}>
      <Header />
      <main className={styles.main}>
        <div className={styles.mainSmall}>
          <div>
            <h1 className={styles.marginBtm1}>
              {t(getTranslationID("accountDeleteSuccess.label.title"))}
            </h1>
          </div>

          <section>
            <dl className={`${styles.formList} ${styles.hasbg}`}>
              <dt className={styles.formTitle} />
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                {t(getTranslationID("accountDeleteSuccess.label.message"))}
              </dd>
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                <Link to="/">
                  {t(
                    getTranslationID(
                      "accountDeleteSuccess.label.backToTopPageLink"
                    )
                  )}
                </Link>
              </dd>
            </dl>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
};
