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 { useExtensionAccountHolderSearchDetailMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionAccountHolderSearchDetailParams, 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';

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

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

    const [titleInfo, setTitleInfo] = useState<TitleInfo>();
    const [detailInfo, setDetailInfo] = useState<DetailInfo>();

    useSetHeaderTitle('계좌성명조회 상세');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.accountHolderSearch.list);
    });

    const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailMutation();

    const callDetail = () => {
        let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = {
            mid: mid,
            tid: tid
        }
        accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: DetailResponse) => {
            console.log("Detail Info: ", rs)
            setTitleInfo(rs.titleInfo);
            setDetailInfo(rs.detailInfo);
        });
    };
    useEffect(() => {
        callDetail();
    }, []);
    return (
        <>
            <main>
                <div className="tab-content">
                    <div className="tab-pane sub active">
                        <div className="pay-top">
                            <TitleInfoWrap
                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
                                titleInfo={titleInfo}
                            ></TitleInfoWrap>
                        </div>
                        <div className="pay-detail">
                            <div className="detail-divider"></div>
                            <DetailInfoWrap
                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
                                detailInfo={detailInfo}
                            ></DetailInfoWrap>
                        </div>
                    </div>
                </div>
            </main >
        </>
    )
}