import moment from 'moment';
import { useTranslation } from 'react-i18next';
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';
import { getPaymentMethodName } from '@/entities/settlement/model/constant';

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

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

  return (
    <>
      <div className="txn-section">
        <div
          className="section-title"
          onClick={ () => onClickToSetShowInfo() }
        >
          {t('settlement.transactionDetailInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">{t('transaction.fields.orderNumber')}</span>
              <span className="v">{ transactionInfo?.orderNumber }</span>
            </li>
            <li className="kv-row">
              <span className="k">{t('transaction.fields.tid')}</span>
              <span className="v">{ transactionInfo?.tid }</span>
            </li>
            <li className="kv-row">
              <span className="k">{t('transaction.fields.originalTid')}</span>
              <span className="v">{ transactionInfo?.originalTid }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('transaction.fields.transactionStatus')}</span>
              <span className="v">{ transactionInfo?.transactionStatus }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('transaction.fields.paymentMethod')}</span>
              <span className="v">{ getPaymentMethodName(t, transactionInfo?.paymentMethod) }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
              <span className="v">{ moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('transaction.fields.approvalDay')}</span>
              <span className="v">{ moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('transaction.fields.cancelDate')}</span>
              <span className="v">{ moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.cardBankTelecom')}</span>
              <span className="v">{ transactionInfo?.cardCompany }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.approvalAccountPhone')}</span>
              <span className="v">{ transactionInfo?.approvalNumber }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('transaction.fields.productName')}</span>
              <span className="v">{ transactionInfo?.productName }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('transaction.fields.buyer')}</span>
              <span className="v">{ transactionInfo?.buyerName }</span>
            </li>
          </ul>
        }
        </SlideDown>
      </div>
    </>
  );
};