import React, { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { AppDispatch } from "app/store";
import { useDispatch, useSelector } from "react-redux";
import { selectAccountInfo, selectIsLoading } from "features/account";
import { deleteAccountAsync } from "features/account/operations";
import { useMsal } from "@azure/msal-react";
import styles from "../../styles/app.module.scss";
import { getTranslationID } from "../../translation";
import close from "../../assets/images/close.svg";
import deleteButton from "../../assets/images/delete.svg";

interface DeleteAccountPopupProps {
  onClose: () => void;
}

export const DeleteAccountPopup: React.FC<DeleteAccountPopupProps> = (
  props
) => {
  const { onClose } = props;
  const { t } = useTranslation();
  const dispatch: AppDispatch = useDispatch();
  const isLoading = useSelector(selectIsLoading);

  const { instance } = useMsal();

  const accountInfo = useSelector(selectAccountInfo);

  // ポップアップを閉じる処理
  const closePopup = useCallback(() => {
    if (isLoading) {
      return;
    }
    onClose();
  }, [isLoading, onClose]);

  const onDeleteAccount = useCallback(async () => {
    const { meta } = await dispatch(
      deleteAccountAsync({
        accountId: accountInfo.account.accountId,
      })
    );

    // 削除成功後にAccountDeleteSuccess ページに遷移
    if (meta.requestStatus === "fulfilled") {
      instance.logoutRedirect({
        postLogoutRedirectUri: "/accountDeleteSuccess",
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [instance]);

  // HTML
  return (
    <div className={`${styles.modal} ${styles.isShow}`}>
      <div className={styles.modalBox}>
        <p className={styles.modalTitle}>
          {t(getTranslationID("deleteAccountPopup.label.title"))}
          <button
            type="button"
            onClick={closePopup}
            data-tag="close-delegate-popup"
          >
            <img src={close} className={styles.modalTitleIcon} alt="close" />
          </button>
        </p>
        <form className={styles.form}>
          <dl className={`${styles.formList} ${styles.hasbg}`}>
            <dt className={`${styles.formTitle} ${styles.alignCenter}`}>
              <p>
                <img
                  src={deleteButton}
                  alt="delete"
                  className={styles.formTrash}
                />
              </p>
              {t(getTranslationID("deleteAccountPopup.label.subTitle"))}
            </dt>
            <dd
              className={`${styles.full} ${styles.alignCenter} ${styles.full}`}
            >
              <p className={styles.txWsline}>
                {t(
                  getTranslationID(
                    "deleteAccountPopup.label.cautionOfDeleteingAccountData"
                  )
                )}
              </p>
            </dd>
            <dd className={`${styles.full} ${styles.alignCenter}`}>
              <input
                type="button"
                name="submit"
                value={t(
                  getTranslationID("deleteAccountPopup.label.deleteButton")
                )}
                className={`${styles.formDelete} ${styles.marginBtm1} ${styles.isActive}`}
                onClick={onDeleteAccount}
                data-tag="delete-account"
              />
              <p>
                <input
                  type="button"
                  name="cancel"
                  value={t(
                    getTranslationID("deleteAccountPopup.label.cancelButton")
                  )}
                  className={`${styles.formButtonTx} ${styles.marginBtm1}`}
                  onClick={closePopup}
                  data-tag="cancel-delete-account"
                />
              </p>
            </dd>
          </dl>
        </form>
      </div>
    </div>
  );
};
