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

export const EscrowInfoSection = ({
  escrowInfo,
  isOpen,
  onClickToOpenInfo
}: InfoSectionProps) => {
  const { t } = useTranslation();
  
  const onClickToSetOpenInfo = () => {
    if(!!onClickToOpenInfo){
      onClickToOpenInfo(InfoSectionKeys.Escrow);
    }
  };
  
  return (
    <>
      <div className="txn-section">
        <div
          className="section-title with-toggle"
          onClick={ () => onClickToSetOpenInfo() }
        >
          {t('transaction.sections.escrowInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { !!isOpen &&
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryStatus')}</span>
              <span className="v">{ escrowInfo?.deliveryStatus }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryRegistration')}</span>
              <span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryComplete')}</span>
              <span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseConfirm')}</span>
              <span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseReject')}</span>
              <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.rejectReason')}</span>
              <span className="v">{ escrowInfo?.rejectReason }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.escrowCertNumber')}</span>
              <span className="v">{ escrowInfo?.escrowCertNumber }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryCompany')}</span>
              <span className="v">{ escrowInfo?.deliveryCompany }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.trackingNumber')}</span>
              <span className="v">{ escrowInfo?.trackingNumber }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryAddress')}</span>
              <span className="v">{ escrowInfo?.deliveryAddress }</span>
            </li>
          </ul>
        }
        </SlideDown>
      </div>
    </>
  )
};