// 代行操作中に表示するコンポーネント
// ------------------------------------------------------
import React, { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { getTranslationID } from "translation";
import { useDispatch, useSelector } from "react-redux";
import {
  cleanupDelegateAccount,
  selectDelegatedCompanyName,
} from "features/partner";
import { clearDelegationToken } from "features/auth";
import { useNavigate } from "react-router-dom";
import styles from "../../styles/app.module.scss";
import exit from "../../assets/images/exit.svg";
import reportWhite from "../../assets/images/report_white.svg";

export const DelegationBar: React.FC = (): JSX.Element => {
  const delegatedCompanyName = useSelector(selectDelegatedCompanyName);
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const onClickExit = useCallback(() => {
    if (
      /* eslint-disable-next-line no-alert */
      !window.confirm(t(getTranslationID("common.message.dialogConfirm")))
    ) {
      return;
    }
    dispatch(clearDelegationToken());
    dispatch(cleanupDelegateAccount());
    navigate("/partners");
  }, [dispatch, navigate, t]);

  return (
    <div className={styles.manageInfo}>
      <img src={reportWhite} className={styles.manageIcon} alt="report" />
      <p className={styles.txNormal}>
        {t(getTranslationID("common.label.operationInsteadOf"))}
        <span>{delegatedCompanyName}</span>
      </p>
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
      <img
        src={exit}
        className={styles.manageIconClose}
        alt="Exit"
        title="Exit"
        onClick={onClickExit}
        data-tag="exit-delegation"
      />
    </div>
  );
};
