import moment from 'moment';
import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
import 'react-slidedown/lib/slidedown.css';

export const DetailInfoWrap = ({
    additionalServiceCategory,
    detailInfo
}: DetailInfoSectionProps) => {

    return (
        <>
            <div className="txn-section">
                <div className="section-title">상세 정보</div>
                <ul className="kv-list">
                    {/*링크결제_발송내역*/}
                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) &&
                        <>
                            < li className="kv-row">
                                <span className="k">이메일</span>
                                <span className="v">{detailInfo?.email}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">휴대폰 번호</span>
                                <span className="v">{detailInfo?.phoneNumber}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">상품명</span>
                                <span className="v">{detailInfo?.goodsName && detailInfo?.goodsName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">주문번호</span>
                                <span className="v">{detailInfo?.moid}</span>
                            </li>
                        </>
                    }
                    {/*계좌성명조회*/}
                    {(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) &&
                        <>
                            <li className="kv-row">
                                <span className="k">조회 일시</span>
                                <span className="v">{detailInfo?.requestDate && moment(detailInfo.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결과</span>
                                <span className="v">{detailInfo?.resultStatus}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">실패사유</span>
                                <span className="v">{detailInfo?.failureReason}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">은행</span>
                                <span className="v">{detailInfo?.bankName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">계좌번호</span>
                                <span className="v">{detailInfo?.accountNo}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">요청 구분</span>
                                <span className="v">{detailInfo?.requestWay}</span>
                            </li>
                        </>

                    }
                    {/*계좌점유인증*/}
                    {(additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) &&
                        <>
                            < li className="kv-row">
                                <span className="k">가맹점상호</span>
                                <span className="v">{detailInfo?.companyName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">MID</span>
                                <span className="v">{detailInfo?.mid}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">요청일시</span>
                                <span className="v">{detailInfo?.requestDate && moment(detailInfo.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">은행</span>
                                <span className="v">{detailInfo?.bankName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">계좌번호</span>
                                <span className="v">{detailInfo?.accountNo}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">예금주</span>
                                <span className="v">{detailInfo?.accountName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결과</span>
                                <span className="v">{detailInfo?.transferStatus}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">실패사유</span>
                                <span className="v">{detailInfo?.failureReason && detailInfo?.failureReason}</span>
                            </li>
                        </>
                    }
                </ul >
            </div >
        </>
    )
};