import moment from 'moment';
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 { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '@/entities/additional-service/model/account-holder-search/types';
import { useExtensionAccountHolderSearchDetailtMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
import { getAccountHolderStatusText } from '@/entities/additional-service/model/account-holder-search/constant';
import { useTranslation } from 'react-i18next';

export const AccountHolderSearchDetailPage = () => {
    const { navigate } = useNavigate();
    const { t } = useTranslation();
    const location = useLocation();

    const { mid, tid } = location.state || {};

    const [detail, setDetail] = useState<ExtensionAccountHolderSearchDetailResponse>();

    useSetHeaderTitle(t('additionalService.accountHolderSearch.detailTitle'));
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.accountHolderSearch.list);
    });

    const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailtMutation();

    const callDetail = () => {
        let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = {
            mid: mid,
            tid: tid
        }
        accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: ExtensionAccountHolderSearchDetailResponse) => {
            setDetail(rs);
        });
    };

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

    useEffect(() => {
        callDetail();
    }, []);
    return (
        <>
            <main>
                <div className="tab-content">
                    <div className="tab-pane sub active">
                        <div className="pay-top">
                            <div className="num-amount">
                                <span className="amount">{detail?.accountNo}</span>
                            </div>
                            <span className="num-day">{detail?.bankName}</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.accountHolder')}</span>
                                    <span className="v">{detail?.accountName}</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('common.result')}</span>
                                    <span className="v">{getAccountHolderStatusText(t)(detail?.resultStatus)}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">{t('transaction.fields.failureReason')}</span>
                                    <span className="v">{detail?.failReason ? detail?.failReason : '-' }</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('additionalService.accountHolderAuth.requestWay')}</span>
                                    <span className="v">{detail?.requestWay}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </main >
        </>
    )
}