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

export interface CalendarAmountRowProps {
  amount: number;
  settlementStatus: SettlementStatus;
};

export const CalendarAmountRow = ({
  amount,
  settlementStatus
}: CalendarAmountRowProps) => {
  const { t } = useTranslation();

  const makeTitle = () => {
    let rs = [];
    if(settlementStatus === SettlementStatus.SCHEDULED){
      rs.push(
        <span
          key='amount-label-scheduled'
          className="scheduled"
        >{t('settlement.scheduled')}</span>
      );
    }
    else if(settlementStatus === SettlementStatus.COMPLETED){
      rs.push(
        <span
          key='amount-label-complete'
          className="complete"
        >{t('settlement.completed')}</span>
      );
    }
    return rs;
  };

  return (
    <>
      <div className="amount-row">
        <div className="amount-label">{t('settlement.settlementShort')} { makeTitle() } {t('filter.amount')}</div>
        <div className="amount-value">
          <NumericFormat
            value={ amount }
            thousandSeparator
            displayType="text"
            suffix={t('common.currencyUnit')}
          ></NumericFormat>
        </div>
      </div>
    </>
  );
};