import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
    useSetHeaderTitle,
    useSetHeaderType,
    useSetFooterMode,
    useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { AdditionalServiceCategory, DetailInfo, DetailResponse, TitleInfo } from '@/entities/additional-service/model/types';
import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
import { useLocation } from 'react-router';
import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
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';

export const AccountHolderAuthDetailPage = () => {
    const { navigate } = useNavigate();
    const { t } = useTranslation();
    const location = useLocation();
    const { mid, tid } = location.state || {};
    const [detail, setDetail] = useState<ExtensionAccountHolderAuthDetailResponse>();

    useSetHeaderTitle('계좌점유인증 상세');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.accountHolderAuth.list);
    });

    const { mutateAsync: accountHolderAuthDetail } = useExtensionAccountHolderAuthDetailMutation();

    const callDetail = () => {
        let accountHolderAuthDetailParams: ExtensionAccountHolderAuthDetailParams = {
            mid: mid,
            tid: tid
        }
        accountHolderAuthDetail(accountHolderAuthDetailParams).then((rs: ExtensionAccountHolderAuthDetailResponse) => {
            setDetail(rs);
        });
    };
    useEffect(() => {
        callDetail();
    }, []);

    const getDate = (date?: string) => {
        return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
    };
    return (
        <>
            <main>
                <div className="tab-content">
                    <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">상세 정보</div>
                            <ul className="kv-list">
                                <li className="kv-row">
                                    <span className="k">가맹점상호</span>
                                    <span className="v">{detail?.companyName}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">MID</span>
                                    <span className="v">{detail?.mid}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">요청일시</span>
                                    <span className="v">{getDate(detail?.requestDate)}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">은행</span>
                                    <span className="v">{detail?.bankName}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">계좌번호</span>
                                    <span className="v">{detail?.accountNo}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">예금주</span>
                                    <span className="v">{detail?.accountName}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">결과</span>
                                    <span className="v">{getAuthStatusText(t)(detail?.authStatus)}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">실패 사유</span>
                                    <span className="v">{detail?.failReason ? getAuthResultStatusText(t)(detail?.failReason) : '-' }</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </main >
        </>
    )
}