import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { SettlementsTransactionSummaryResponse } from '../model/types';

export interface ListSummaryExtendTransactionProps extends SettlementsTransactionSummaryResponse {};

export const ListSummaryExtendTransaction = ({
  settlementAmount,
  transactionAmount,
  paymentFeeAmount,
  escrowFeeAmount,
  authFeeAmount,
  vatAmount,
  preSettlementCancelOffset
}: ListSummaryExtendTransactionProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="summary-extend">
        <ul className="summary-amount-list">
          <li className="summary-amount-item">
            <span className="label">{t('settlement.transactionAmount')}</span>
            <span className="value">
              <NumericFormat
                value={ transactionAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.paymentFee')}</span>
            <span className="value minus">
              <NumericFormat
                value={ paymentFeeAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.escrowFee')}</span>
            <span className="value">
              <NumericFormat
                value={ escrowFeeAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.authFee')}</span>
            <span className="value link">
              <NumericFormat
                value={ authFeeAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">VAT</span>
            <span className="value minus">
              <NumericFormat
                value={ vatAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.preSettlementCancelOffset')}</span>
            <span className="value minus">
              <NumericFormat
                value={ preSettlementCancelOffset }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
        </ul>
      </div>
    </>
  );
};