import moment from 'moment';
import { InfoSectionProps } from '../../model/types';
import { useTranslation } from 'react-i18next';

export const BillingInfoSection = ({
  billingInfo,
}: InfoSectionProps) => {
  const { t } = useTranslation();

  const getInstallmentMonth = () => {
    let rs = [];
    if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){
      rs.push(
        <li
          key={ `key-installmentMonth`}
          className="kv-row"
        >
          <span className="k">{ t('transaction.fields.installmentMonth') }</span>
          <span className="v">{ t('transaction.fields.installmentMonthly', { count: parseInt(billingInfo?.installmentMonth || '0') }) }</span>
        </li>
      );
    }
    else{
      rs.push(
        <li
          key={ `key-installmentMonth`}
          className="kv-row"
        >
          <span className="k">{ t('transaction.fields.installmentMonth') }</span>
          <span className="v">{ t('transaction.fields.lumpSum') }</span>
        </li>
      );
    }
    return rs;
  };
  return (
    <>
      <div className="txn-section">
        <div className="section-title">{ t('transaction.sections.importantInfo') }</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.billKey') }</span>
            <span className="v">{ billingInfo?.billKey }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.tid') }</span>
            <span className="v">{ billingInfo?.tid }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.orderNumber') }</span>
            <span className="v">{ billingInfo?.orderNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.approvalNumber') }</span>
            <span className="v">{ billingInfo?.approvalNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.approvalDate') }</span>
            <span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.requestStatus') }</span>
            <span className="v">{ billingInfo?.requestStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.processResult') }</span>
            <span className="v">{ billingInfo?.processResult }</span>
          </li>
          { getInstallmentMonth() }
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.productName') }</span>
            <span className="v">{ billingInfo?.productName }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ t('transaction.fields.buyer') }</span>
            <span className="v">{ billingInfo?.buyerName }</span>
          </li>
        </ul>
      </div>
    </>
  )
};