import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';

export const ImportantInfoWrap = ({
  transactionCategory,
  importantInfo,
  serviceCode
  }: DetailInfoProps) => {
  
  const subItems: Record<string, Record<string, string>> = {
    ordNo: {name: '주문번호', type: 'string'},
    tid: {name: 'TID', type: 'string'},
    tradeStatus: {name: '거래상태', type: 'string'},
    tradeMethod: {name: '거래수단', type: 'string'},
    approvalDate: {name: '승인일', type: 'date'},
    tradeDate: {name: '거래일', type: 'date'},
    requestDate: {name: '요청일', type: 'date'},
    cancelDate: {name: '취소일', type: 'date'},
    productName: {name: '상품명', type: 'string'}
  };
  
  const showSubItems: Record<string, Array<string>> = {
    // 신용카드
    '01': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'approvalDate', 'cancelDate', 'productName'],
    // 계좌이체
    '02': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
      'tradeDate', 'cancelDate', 'productName'],
    // 가상계좌
    '03': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'requestDate', 'cancelDate', 'productName'],
    // 휴대폰
    '04': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'tradeDate', 'cancelDate', 'productName'],
    // 계좌간편결제
    '26': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'tradeDate', 'cancelDate', 'productName'],
    // SSG머니
    '21': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'tradeDate', 'cancelDate', 'productName'],
    // SSG은행계좌
    '24': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'tradeDate', 'cancelDate', 'productName'],
    // 문화상품권
    '14': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'tradeDate', 'cancelDate', 'productName'],
    // 티머니페이
    '31': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
      'tradeDate', 'cancelDate', 'productName'],
  };
  
  const checkValue = (val: any) => {
    return (!!val || val === 0);
  };
  let newImportantInfo: Record<string, any> | undefined = importantInfo;
  const subLi = () => {
    let rs = [];

    if(!!newImportantInfo && !!serviceCode && !!showSubItems[serviceCode]){
      for(let i=0;i<showSubItems[serviceCode].length;i++){
        let k = showSubItems[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(newImportantInfo[k]) && subItems[k]?.type === 'string') &&
                newImportantInfo[k] 
              }
              { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'number') &&
                <NumericFormat
                  value={ newImportantInfo[k] } 
                  thousandSeparator
                  displayType="text"
                  suffix='원'
                ></NumericFormat>
              }
              { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'date') &&
                moment(newImportantInfo[k]).format('YYYY.MM.DD')
              }
              </span>
            </li>
          );
        }
      }
    }
    return rs;
  };


  return (
    <>
      <div className="txn-section">
        <div className="section-title">중요 정보</div>
        <ul className="kv-list">
          { (transactionCategory === TransactionCategory.AllTransaction) && 
            subLi()
          }
          { (transactionCategory === TransactionCategory.Escrow) && 
            <>
              <li className="kv-row">
                <span className="k">주문번호</span>
                <span className="v">{ importantInfo?.orderNumber }</span>
              </li>
              <li className="kv-row">
                <span className="k">TID</span>
                <span className="v">{ importantInfo?.tid }</span>
              </li>
              <li className="kv-row">
                <span className="k">거래상태</span>
                <span className="v">{ importantInfo?.transactionStatus }</span>
              </li>
              <li className="kv-row">
                <span className="k">결제수단</span>
                <span className="v">{ importantInfo?.paymentMethod }</span>
              </li>
              <li className="kv-row">
                <span className="k">승인일</span>
                <span className="v">{ moment(importantInfo?.approvalDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
              </li>
              <li className="kv-row">
                <span className="k">취소일</span>
                <span className="v">{ importantInfo?.cancelDate }</span>
              </li>
              <li className="kv-row">
                <span className="k">상품명</span>
                <span className="v">{ importantInfo?.productName }</span>
              </li>
            </>
          }
          
        </ul>
      </div>
    </>
  )
};