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

export const EscrowInfoWrap = ({
  transactionCategory,
  escrowInfo,
  show,
  onClickToShowInfo
}: DetailInfoProps) => {
  const variants = {
    hidden: { height: 0, display: 'none' },
    visible: { height: 'auto', display: 'block' },
  };

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Escrow);
    }
  };
  
  return (
    <>
      <div className="txn-section">
        <div 
          className="section-title with-toggle"
          onClick={ () => onClickToSetShowInfo() }
        >
          정산 정보 <DetailArrow show={ show }></DetailArrow>
        </div>
        <motion.ul 
          className="kv-list"
          initial="hidden"
          animate={ (show)? 'visible': 'hidden' }
          variants={ variants }
          transition={{ duration: 0.3 }}
        >
          <li className="kv-row">
            <span className="k">배송상태</span>
            <span className="v">{ escrowInfo?.deliveryStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">배송등록</span>
            <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">배송완료</span>
            <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">구매확인</span>
            <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">구매거절</span>
            <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
          </li>
          <li className="kv-row">
            <span className="k">거절사유</span>
            <span className="v">{ escrowInfo?.rejectReason }</span>
          </li>
          <li className="kv-row">
            <span className="k">에스크로인증번호</span>
            <span className="v">{ escrowInfo?.escrowCertNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">택배사</span>
            <span className="v">{ escrowInfo?.deliveryCompany }</span>
          </li>
          <li className="kv-row">
            <span className="k">운송장번호</span>
            <span className="v">{ escrowInfo?.trackingNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">배송주소</span>
            <span className="v">{ escrowInfo?.deliveryAddress }</span>
          </li>
        </motion.ul>
      </div>
    </>
  )
};