import moment from 'moment';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';

export const DetailInfoWrap = ({
  transactionCategory,
  detailInfo,
  isOpen,
  onClickToOpenInfo
}: DetailInfoProps) => {
  
  const onClickToSetOpenInfo = () => {
    if(!!onClickToOpenInfo){
      onClickToOpenInfo(InfoWrapKeys.Issue);
    }
  };
  
  return (
    <>
      <div className="txn-section">
        <div 
          className="section-title with-toggle"
          onClick={ () => onClickToSetOpenInfo() }
        >
          상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { !!isOpen &&
          <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>
        }
        </SlideDown>
      </div>
    </>
  )
};