
import moment from 'moment';
import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../../lib/payment-status-utils';
import { useTranslation } from 'react-i18next';

export const PaymentInfoWrap = ({
    additionalServiceCategory,
    paymentInfo
}: DetailInfoSectionProps) => {
    const { t } = useTranslation();

    console.log("PaymentInfo Check: ", paymentInfo)

    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">{paymentInfo?.buyerName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">발송수단</span>
                                <span className="v">{getSendMethodText(t)(paymentInfo?.sendMethod)}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">발송일자</span>
                                <span className="v">
                                    {paymentInfo?.sendDate && moment(paymentInfo?.sendDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
                                </span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결제상태(실패횟수)</span>
                                <span className="v">  {`${getPaymentStatusText(t)(paymentInfo?.paymentStatus)}(${paymentInfo?.failCount})`}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결제수단</span>
                                <span className="v">{paymentInfo?.paymentMethod}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결제일자</span>
                                <span className="v">
                                    {paymentInfo?.paymentDate && moment(paymentInfo.paymentDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
                                </span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결제유효일자</span>
                                <span className="v">
                                    {paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate).format('YYYY.MM.DD')}
                                </span>
                            </li>
                        </>
                    }{(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) &&
                        <>
                            <li className="kv-row">
                                <span className="k">진행상태</span>
                                <span className="v">{getProcessStatusText(t)(paymentInfo?.processStatus)}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">요청일자</span>
                                <span className="v">{paymentInfo?.requestDate && moment(paymentInfo.requestDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결제유효일자</span>
                                <span className="v">
                                    {paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
                                </span>
                            </li>
                            <li className="kv-row">
                                <span className="k">발송수단</span>
                                <span className="v">{paymentInfo?.sendMethod}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">구매자명</span>
                                <span className="v">{paymentInfo?.buyerName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">이메일</span>
                                <span className="v">
                                    {paymentInfo?.email && paymentInfo.email}
                                </span>
                            </li>
                            <li className="kv-row">
                                <span className="k">휴대폰번호</span>
                                <span className="v">
                                    {paymentInfo?.phoneNumber && paymentInfo.phoneNumber}
                                </span>
                            </li>
                            <li className="kv-row">
                                <span className="k">상품명</span>
                                <span className="v">
                                    {paymentInfo?.goodsName && paymentInfo.goodsName}
                                </span>
                            </li>
                            <li className="kv-row">
                                <span className="k">주문번호</span>
                                <span className="v">
                                    {paymentInfo?.moid && paymentInfo?.moid}
                                </span>
                            </li>
                        </>
                    }
                </ul>
            </div>
        </>
    )

}

