import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import {
  InfoWrapKeys,
  AmountInfoWrapProps,
  SettlementPeriodType
} from '@/entities/settlement/model/types';

export const AmountInfoWrap = ({
  periodType,
  amountInfo,
  settlementAmount
}: AmountInfoWrapProps) => {
  const { t, i18n } = useTranslation();

  return (
    <>
      <div className="txn-section">
        <div className="section-title">{t('settlement.amountInfo')}</div>
        { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">{t('settlement.totalTransactionAmount')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalTransactionAmount || 0) })}
                <NumericFormat
                  value={ amountInfo?.totalTransactionCount }
                  thousandSeparator
                  displayType="text"
                  prefix=' ('
                  suffix='건)'
                ></NumericFormat>
              </span>
              <ul className="txn-amount-detail">
                <li>
                  <span>·&nbsp;&nbsp;{t('settlement.creditCard')}</span>
                  <span className="unset-child-span">
                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.creditCardAmount || 0) })}
                    <NumericFormat
                      value={ amountInfo?.creditCardCount }
                      thousandSeparator
                      displayType="text"
                      prefix=' ('
                      suffix='건)'
                    ></NumericFormat>
                  </span>
                </li>
                <li>
                  <span>·&nbsp;&nbsp;{t('settlement.accountTransfer')}</span>
                  <span className="unset-child-span">
                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.accountTransferAmount || 0) })}
                    <NumericFormat
                      value={ amountInfo?.accountTransferCount }
                      thousandSeparator
                      displayType="text"
                      prefix=' ('
                      suffix='건)'
                    ></NumericFormat>
                  </span>
                </li>
              </ul>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.totalPgFee')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.totalPgFee }
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
              <ul className="txn-amount-detail">
                <li>
                  <span>·&nbsp;&nbsp;{t('settlement.paymentFee')}</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.paymentFee }
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </span>
                </li>
                <li>
                  <span>·&nbsp;&nbsp;{t('settlement.escrowFee')}</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.escrowFee }
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </span>
                </li>
                <li>
                  <span>·&nbsp;&nbsp;{t('settlement.authFee')}</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.authFee }
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </span>
                </li>
                <li>
                  <span>·&nbsp;&nbsp;VAT</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.vatFee }
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </span>
                </li>
              </ul>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.hold')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.holdAmount }
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.release')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.releaseAmount }
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.offset')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.offsetAmount }
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.settlementAmount')}</span>
              <span className="v">
                <NumericFormat
                  value={ settlementAmount }
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
          </ul>
        }
        { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">{t('settlement.transactionAmount')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })}
              </span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.paymentFee')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.paymentFee || 0) })}
              </span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.escrowFee')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
              </span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.authFee')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.authFee || 0) })}
              </span>
            </li>
            <li className="kv-row">
              <span className="k">VAT</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vatFee || 0) })}
              </span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.expectedSettlementAmount')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.settlementAmount || 0) })}
              </span>
            </li>
            <li className="kv-row">
              <span className="k">{t('settlement.preSettlementCancelOffset')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.preSettlementCancelOffset || 0) })}
              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('settlement.settlementAmount')}</span>
              <span className="v">
                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.finalSettlementAmount || 0) })}
              </span>
            </li>
          </ul>
        }
      </div>
    </>
  );
};