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

export const TransactionInfoWrap = ({
  transactionInfo,
  isOpen,
  onClickToShowInfo
}: TransactionInfoWrapProps) => {

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Transaction);
    }
  };

  return (
    <>
      <div className="txn-section">
        <div 
          className="section-title"
          onClick={ () => onClickToSetShowInfo() }
        >
          거래 상세 정보 <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">{ transactionInfo?.orderNumber }</span>
            </li>
            <li className="kv-row">
              <span className="k">TID</span>
              <span className="v">{ transactionInfo?.tid }</span>
            </li>
            <li className="kv-row">
              <span className="k">원거래 TID</span>
              <span className="v">{ transactionInfo?.originalTid }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">거래상태</span>
              <span className="v">{ transactionInfo?.transactionStatus }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">결제수단</span>
              <span className="v">{ transactionInfo?.paymentMethod }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">정산일</span>
              <span className="v">{ moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">승인일</span>
              <span className="v">{ moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">취소일</span>
              <span className="v">{ moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">카드/은행/이통사</span>
              <span className="v">{ transactionInfo?.cardCompany }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">승인번호/계좌번호/휴대번호</span>
              <span className="v">{ transactionInfo?.approvalNumber }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">상품명</span>
              <span className="v">{ transactionInfo?.productName }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">구매자</span>
              <span className="v">{ transactionInfo?.buyerName }</span>
            </li>
          </ul>
        }
        </SlideDown>
      </div>
    </>
  );
};