import moment from 'moment';
import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

export const DetailInfoWrap = ({
  transactionCategory,
  detailInfo,
  show,
  onClickToShowInfo
}: DetailInfoProps) => {
  
  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Issue);
    }
  };
  
  return (
    <>
      <div className="txn-section">
        <div 
          className="section-title with-toggle"
          onClick={ () => onClickToSetShowInfo() }
        >
          상세 정보 <DetailArrow show={ show }></DetailArrow>
        </div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">취소일자</span>
            <span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">취소승인번호</span>
            <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">현금영수증</span>
            <span className="v">{ detailInfo?.receiptInfo }</span>
          </li>
          <li className="kv-row">
            <span className="k">TID</span>
            <span className="v">{ detailInfo?.tid }</span>
          </li>
          <li className="kv-row">
            <span className="k">거래ID</span>
            <span className="v">{ detailInfo?.merchantTid }</span>
          </li>
          <li className="kv-row">
            <span className="k">서브몰명</span>
            <span className="v">{ detailInfo?.subMallName }</span>
          </li>
          <li className="kv-row">
            <span className="k">서브몰 사업자 번호</span>
            <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">발행경로</span>
            <span className="v">{ detailInfo?.issueChannel }</span>
          </li>
          <li className="kv-row">
            <span className="k">실패사유</span>
            <span className="v">{ detailInfo?.failureReason }</span>
          </li>
        </ul>
      </div>
    </>
  )
};