import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';

export const PaymentInfoSection = ({
  transactionCategory,
  paymentInfo,
  serviceCode,
  isOpen,
  onClickToOpenInfo
}: InfoSectionProps) => {
  const { t } = useTranslation();

  const subItems: Record<string, Record<string, string>> = {
    approvalPurchase: {name: t('transaction.fields.approvalPurchase'), type: 'string'},
    approvalRejectCount: {name: t('transaction.fields.approvalRejectCount'), type: 'number', addString: '건'},
    approvalRepurchaseCount: {name: t('transaction.fields.approvalRepurchaseCount'), type: 'number', addString: '건'},
    approvalVAN: {name: t('transaction.fields.approvalVAN'), type: 'string'},
    cancelPurchase: {name: t('transaction.fields.cancelPurchase'), type: 'string'},
    cancelRejectCount: {name: t('transaction.fields.cancelRejectCount'), type: 'number', addString: '건'},
    cancelRepurchaseCount: {name: t('transaction.fields.cancelRepurchaseCount'), type: 'number', addString: '건'},
    purchaseVan: {name: t('transaction.fields.purchaseVan'), type: 'string'},
    purchaseCompany: {name: t('transaction.fields.purchaseCompany'), type: 'string'},
    cardNo: {name: t('transaction.fields.cardNo'), type: 'string'},
    approvalNo: {name: t('transaction.fields.approvalNo'), type: 'string'},
    installmentMonth: {name: t('transaction.fields.installmentPeriod'), type: 'string', addString: '개월'},
    authentication: {name: t('transaction.fields.authentication'), type: 'string'},

    joinType: {name: t('transaction.fields.joinType'), type: 'string'},
    bankName: {name: t('transaction.fields.bankName'), type: 'string'},
    accountNo: {name: t('transaction.fields.accountNo'), type: 'string'},
    refundCompleteDate: {name: t('transaction.fields.refundCompleteDate'), type: 'string'},
    customerId: {name: t('transaction.fields.customerId'), type: 'string'},

    culturelandId: {name: t('transaction.fields.culturelandId'), type: 'string'},

    partner: {name: t('transaction.fields.partner'), type: 'string'},
    cpid: {name: t('transaction.fields.cpid'), type: 'string'},
    goodsCategory: {name: t('transaction.fields.goodsCategory'), type: 'string'},
    cellphoneNo: {name: t('transaction.fields.cellphoneNo'), type: 'string'},

    giftCardNumber: {name: t('transaction.fields.giftCardNumber'), type: 'string'},

    depositBankName: {name: t('transaction.fields.depositBankName'), type: 'string'},
    depositorName: {name: t('transaction.fields.depositorName'), type: 'string'},
    depositDeadline: {name: t('transaction.fields.depositDeadline'), type: 'date'},
    depositDate: {name: t('transaction.fields.depositDate'), type: 'date'},
    refundScheduleDate: {name: t('transaction.fields.refundScheduleDate'), type: 'date'},
    refundBankName: {name: t('transaction.fields.refundBankName'), type: 'string'},
    refundAccountNo: {name: t('transaction.fields.refundAccountNo'), type: 'string'},
    accountHolder: {name: t('transaction.fields.accountHolder'), type: 'string'},
  };

  const openSubItems: Record<string, Array<string>> = {
    // 신용카드
    '01': ['approvalPurchase', 'approvalRejectCount', 'approvalRepurchaseCount', 
      'approvalVAN', 'cancelPurchase', 'cancelRejectCount', 'cancelRepurchaseCount',
      'purchaseVan', 'purchaseCompany', 'cardNo', 'approvalNo',
      'installmentMonth', 'authentication'],
    // 계좌이체
    '02': ['joinType', 'bankName', 'accountNo'],
    // 가상계좌
    '03': ['bankName', 'accountNo', 'depositBankName', 'depositorName',
      'depositDeadline', 'depositDate', 'refundScheduleDate',
      'refundBankName', 'refundAccountNo', 'accountHolder'],
    // 휴대폰
    '05': ['refundCompleteDate', 'partner', 'cpid', 'goodsCategory', 'cellphoneNo'],
    // 문화상품권
    '14': ['culturelandId'],
    // SSG머니
    '21': ['giftCardNumber'],
    // SSG은행계좌
    '24': [],
    // 계좌간편결제
    '26': ['bankName', 'refundCompleteDate', 'accountHolder', 'joinType', 'customerId'],
    // 티머니페이
    '31': ['cardNo', 'approvalNo', 'cpid'],
  };

  const checkValue = (val: any) => {
    return (!!val || val === 0);
  };
  let newPaymentInfo: Record<string, any> | undefined = paymentInfo;
  const subLi = () => {
    let rs = [];

    if(!!newPaymentInfo && !!serviceCode && !!openSubItems[serviceCode]){
      for(let i=0;i<openSubItems[serviceCode].length;i++){
        let k = openSubItems[serviceCode][i];
        if(!!k){
          rs.push(
            <li 
              key={`key-important-item-${i}`}
              className="kv-row"
            >
              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
              <span className="v">
              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
                (k === 'installmentMonth' && newPaymentInfo[k] === '00') &&
                  t('transaction.fields.lumpSum')
              }
              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
                (k === 'installmentMonth' && newPaymentInfo[k] !== '00') &&
                newPaymentInfo[k] + (subItems[k]?.addString || '')
              }
              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
                ( k!== 'installmentMonth' ) &&
                newPaymentInfo[k] + (subItems[k]?.addString || '')
              }
              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'number') &&
                <NumericFormat
                  value={ newPaymentInfo[k] } 
                  thousandSeparator
                  displayType="text"
                  suffix={ subItems[k]?.addString }
                ></NumericFormat>
              }
              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'date') &&
                moment(newPaymentInfo[k]).format('YYYY.MM.DD')
              }
              </span>
            </li>
          );
        }
      }
    }
    return rs;
  };

  const onClickToSetOpenInfo = () => {
    if(!!onClickToOpenInfo){
      onClickToOpenInfo(InfoSectionKeys.Payment);
    }
  };
  
  return (
    <>
      <div className="txn-section">
        <div
          className="section-title with-toggle"
          onClick={ () => onClickToSetOpenInfo() }
        >
          {t('transaction.sections.paymentInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { !!isOpen &&
          <ul className="kv-list">
            { (transactionCategory === TransactionCategory.AllTransaction) && 
              subLi()
            }
            { (transactionCategory === TransactionCategory.Escrow) && 
              <>
                { (serviceCode === '01') &&
                  <>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalPurchaseDate')}</span>
                      <span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRejectCount')}</span>
                      <span className="v">
                        <NumericFormat
                          value={ paymentInfo?.approvalRejectCount }
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat>
                      </span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRepurchaseCount')}</span>
                      <span className="v">
                        <NumericFormat
                          value={ paymentInfo?.approvalRepurchaseCount }
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat>
                      </span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalVAN')}</span>
                      <span className="v">{ paymentInfo?.approvalVAN }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelPurchaseDate')}</span>
                      <span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRejectCount')}</span>
                      <span className="v">
                        <NumericFormat
                          value={ paymentInfo?.cancelRejectCount }
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat>
                      </span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRepurchaseCount')}</span>
                      <span className="v">
                        <NumericFormat
                          value={ paymentInfo?.cancelRepurchaseCount }
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat>
                      </span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseVan')}</span>
                      <span className="v">{ paymentInfo?.purchaseVan }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseCompany')}</span>
                      <span className="v">{ paymentInfo?.purchaseCompany }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cardNo')}</span>
                      <span className="v">{ paymentInfo?.cardNo }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalNo')}</span>
                      <span className="v">{ paymentInfo?.approvalNo }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.installmentPeriod')}</span>
                      <span className="v">{ (paymentInfo?.installmentMonth === '00')? t('transaction.fields.lumpSum'): paymentInfo?.installmentMonth }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.authentication')}</span>
                      <span className="v">{ paymentInfo?.authentication }</span>
                    </li>
                  </>
                }
                { (serviceCode === '02') &&
                  <>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.joinType')}</span>
                      <span className="v">{ paymentInfo?.joinType  }</span>
                    </li>
                  </>
                }
                { (serviceCode === '02' || serviceCode === '03') &&
                  <>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.bankName')}</span>
                      <span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountNo')}</span>
                      <span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span>
                    </li>
                  </>
                }
                { (serviceCode === '03') &&
                  <>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositorName')}</span>
                      <span className="v">{ paymentInfo?.depositorName }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDeadline')}</span>
                      <span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDate')}</span>
                      <span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundScheduleDate')}</span>
                      <span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundBankName')}</span>
                      <span className="v">{ paymentInfo?.refundBankName }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundAccountNo')}</span>
                      <span className="v">{ paymentInfo?.refundAccountNo }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountHolder')}</span>
                      <span className="v">{ paymentInfo?.accountHolder }</span>
                    </li>
                  </>
                }
              </>
            }
          </ul>
        }
        </SlideDown>
      </div>
    </>
  )
};