import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
import { InfoSectionProps, TransactionCategory } from '../../model/types';
import { useStore } from '@/shared/model/store';
import { getAllTransactionStatusCode } from '../../model/contant';

export const ImportantInfoSection = ({
  transactionCategory,
  importantInfo,
  serviceCode
}: InfoSectionProps) => {
  const { t } = useTranslation();
  let serviceCodes = useStore.getState().CommonStore.serviceCodes;
  let serviceName = '';
  let statusName = '';

  const getServiceName = (serviceCode: string) => {
    let serviceName = '';
    for(let i=0;i<serviceCodes.length;i++){
      if(serviceCodes[i].value === serviceCode){
        serviceName = serviceCodes[i].name;
        break;
      }
    }
    return serviceName;
  };

  const getStatusName = (serviceCode: string, statusCode: string) => {
    let str;
    if(transactionCategory === TransactionCategory.AllTransaction){
      const allTransactionStatusCode = getAllTransactionStatusCode(t);
      Loop1:
      for(let i=0;i<allTransactionStatusCode.length;i++){
        if(serviceCode === allTransactionStatusCode[i]?.serviceCode){
          let list = allTransactionStatusCode[i]?.list;
          if(!!list){
            Loop2:
            for(let j=0;j<list.length;j++){
              if(list[j]?.code === statusCode){
                str = list[j]?.name;
                break Loop1;
              }
            }
          }
        }
      }
    }
    return str || '';
  };
  
  if(serviceCode){
    serviceName = getServiceName(serviceCode);
    if(importantInfo){
      importantInfo.serviceName = serviceName;
    }
  }
  if(serviceCode && importantInfo?.transactionStatus){
    statusName = getStatusName(serviceCode, importantInfo.transactionStatus);
    if(importantInfo){
      importantInfo.statusName = statusName;
    }
  }

  const subItems: Record<string, Record<string, string>> = {
    moid: {name: t('transaction.fields.orderNumber'), type: 'string'},
    tid: {name: t('transaction.fields.tid'), type: 'string'},
    statusName: {name: t('transaction.fields.transactionStatus'), type: 'string'},
    serviceName: {name: t('transaction.fields.transactionMethod'), type: 'string'},
    approvalDate: {name: t('transaction.fields.approvalDay'), type: 'date'},
    transactionDate: {name: t('filter.date'), type: 'date'},
    requestDate: {name: t('filter.date'), type: 'date'},
    cancelDate: {name: t('transaction.fields.cancelDate'), type: 'date'},
    goodsName: {name: t('transaction.fields.productName'), type: 'string'}
  };
  
  const openSubItems: Record<string, Array<string>> = {
    // 신용카드
    '01': ['moid', 'tid', 'statusName', 'serviceName', 
      'approvalDate', 'cancelDate', 'goodsName'],
    // 계좌이체
    '02': ['moid', 'tid', 'statusName', 'serviceName',
      'transactionDate', 'cancelDate', 'goodsName'],
    // 가상계좌
    '03': ['moid', 'tid', 'statusName', 'serviceName', 
      'requestDate', 'cancelDate', 'goodsName'],
    // 휴대폰
    '05': ['moid', 'tid', 'statusName', 'serviceName', 
      'transactionDate', 'cancelDate', 'goodsName'],
    // 문화상품권
    '14': ['moid', 'tid', 'statusName', 'serviceName', 
      'transactionDate', 'cancelDate', 'goodsName'],
    // SSG머니
    '21': ['moid', 'tid', 'statusName', 'serviceName', 
      'transactionDate', 'cancelDate', 'goodsName'],
    // SSG은행계좌
    '24': ['moid', 'tid', 'statusName', 'serviceName', 
      'transactionDate', 'cancelDate', 'goodsName'],
    // 계좌간편결제
    '26': ['moid', 'tid', 'statusName', 'serviceName', 
      'transactionDate', 'cancelDate', 'goodsName'],
    // 티머니페이
    '31': ['moid', 'tid', 'statusName', 'serviceName', 
      'transactionDate', 'cancelDate', 'goodsName'],
  };
  
  const checkValue = (val: any) => {
    return (!!val || val === 0);
  };
  let newImportantInfo: Record<string, any> | undefined = importantInfo;
  const subLi = () => {
    let rs = [];
    
    if(!!newImportantInfo && !!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(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">{t('transaction.sections.importantInfo')}</div>
        <ul className="kv-list">
          { (transactionCategory === TransactionCategory.AllTransaction) &&
            subLi()
          }
          {
          (transactionCategory === TransactionCategory.Escrow) &&
            <>
              <li className="kv-row">
                <span className="k">{t('transaction.fields.orderNumber')}</span>
                <span className="v">{ importantInfo?.orderNumber }</span>
              </li>
              <li className="kv-row">
                <span className="k">{t('transaction.fields.tid')}</span>
                <span className="v">{ importantInfo?.tid }</span>
              </li>
              <li className="kv-row">
                <span className="k">{t('transaction.fields.transactionStatus')}</span>
                <span className="v">{ importantInfo?.transactionStatus }</span>
              </li>
              <li className="kv-row">
                <span className="k">{t('transaction.fields.transactionMethod')}</span>
                <span className="v">{ importantInfo?.paymentMethod }</span>
              </li>
              { serviceCode === '01' &&
                <li className="kv-row">
                  <span className="k">{t('transaction.fields.approvalDay')}</span>
                  <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                </li>
              }
              { serviceCode === '02' &&
                <li className="kv-row">
                  <span className="k">{t('filter.date')}</span>
                  <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                </li>
              }
              { serviceCode === '03' &&
                <li className="kv-row">
                  <span className="k">{t('filter.date')}</span>
                  <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                </li>
              }
              <li className="kv-row">
                <span className="k">{t('transaction.fields.cancelDate')}</span>
                <span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span>
              </li>
              <li className="kv-row">
                <span className="k">{t('transaction.fields.productName')}</span>
                <span className="v">{ importantInfo?.productName }</span>
              </li>
            </>
          }
        </ul>
      </div>
    </>
  )
};