import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useLocation } from 'react-router';
import { useExtensionAccountHolderAuthDetailMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-deatil-mutation';
import { ExtensionAccountHolderAuthDetailParams, ExtensionAccountHolderAuthDetailResponse } from '@/entities/additional-service/model/account-holder-auth/types';
import moment from 'moment';
import { getAuthStatusText } from '@/entities/additional-service/model/account-holder-auth/constant';
import { getAuthResultStatusText } from '@/entities/additional-service/model/face-auth/constant';
import { useTranslation } from 'react-i18next';
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';

export interface AccountHolderAuthDetailProps {
  detailOn: boolean;
  setDetailOn: (detailOn: boolean) => void;
  mid: string;
  tid: string;
};

export const AccountHolderAuthDetail = ({
  detailOn,
  setDetailOn,
  mid,
  tid
}: AccountHolderAuthDetailProps) => {
  const { t } = useTranslation();
  const [detail, setDetail] = useState<ExtensionAccountHolderAuthDetailResponse>();

  const { mutateAsync: accountHolderAuthDetail } = useExtensionAccountHolderAuthDetailMutation();

  const callDetail = () => {
    let accountHolderAuthDetailParams: ExtensionAccountHolderAuthDetailParams = {
      mid: mid,
      tid: tid
    }
    accountHolderAuthDetail(accountHolderAuthDetailParams).then((rs: ExtensionAccountHolderAuthDetailResponse) => {
        setDetail(rs);
    });
  };
  const onClickToClose = () => {
    setDetailOn(false);
  };

  const getDate = (date?: string) => {
    return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
  };

  useEffect(() => {
    if(!!mid && !!tid){
      callDetail();
    }
  }, [mid, tid]);
  
  return (
    <>
      <motion.div 
        className="full-menu-modal" 
        initial="hidden"
        animate={ (detailOn)? 'visible': 'hidden' }
        variants={ DetailMotionVariants }
        transition={ DetailMotionDuration }
        style={ DetailMotionStyle }
      >
        <div className="full-menu-container pdw-16">
          <div className="full-menu-header">
            <div className="full-menu-title center">{ t('additionalService.accountHolderAuth.detailTitle') }</div>
            <div className="full-menu-actions">
              <FullMenuClose
                addClass="full-menu-close"
                onClickToCallback={ onClickToClose }
              ></FullMenuClose>
            </div>
          </div>
          <div className="tab-pane sub active">
            <div className="pay-top">
              <div className="num-amount">
                <span className="amount">{detail?.accountName}</span>
              </div>
              <span className="num-store">{detail?.accountNo}</span>
              <div className="num-day">{getDate(detail?.requestDate)}</div>
            </div>
            <div className="detail-divider"></div>
            <div className="pay-detail">
              <div className="detail-title">{t('transaction.sections.detailInfo')}</div>
              <ul className="kv-list">
                <li className="kv-row">
                  <span className="k">{t('transaction.fields.companyName')}</span>
                  <span className="v">{detail?.companyName}</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('transaction.fields.mid')}</span>
                  <span className="v">{detail?.mid}</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.accountHolderAuth.requestDate')}</span>
                  <span className="v">{getDate(detail?.requestDate)}</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('transaction.fields.bank')}</span>
                  <span className="v">{detail?.bankName}</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('transaction.fields.accountNo')}</span>
                  <span className="v">{detail?.accountNo}</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('transaction.fields.accountHolder')}</span>
                  <span className="v">{detail?.accountName}</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('common.result')}</span>
                  <span className="v">{getAuthStatusText(t)(detail?.authStatus)}</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('transaction.fields.failureReason')}</span>
                  <span className="v">{detail?.failReason ? getAuthResultStatusText(t)(detail?.failReason) : '-' }</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </motion.div>
    </>
  );
}