import { NumericFormat } from 'react-number-format';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps, SettlementPeriodType } from '../model/types';
import moment from 'moment';
import { useTranslation } from 'react-i18next';

export const ListItem = ({
  periodType,
  settlementId,
  settlementDate,
  merchantName,
  mid,
  tid,
  settlementAmount,
  approvalNumber,
  approvalDate,
  transactionAmount
}: ListItemProps) => {
  const { navigate } = useNavigate();
  const { t, i18n } = useTranslation();
  const onClickToNavigate = () => {
    let detailId;
    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
      detailId = settlementId;
    }
    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
      detailId = approvalNumber;
    }

    navigate(PATHS.settlement.detail + detailId, {
      state: {
        periodType: periodType,
        settlementId: settlementId,
        approvalNumber: approvalNumber,
        tid: tid,
      }
    });
  };

  const getDotClass = () => {
    let rs = 'gray';
    if(periodType === SettlementPeriodType.SETTLEMENT_DATE && settlementAmount){
      if(settlementAmount > 0) rs = 'blue';
    }
    else if(periodType === SettlementPeriodType.TRANSACTION_DATE && transactionAmount){
      if(transactionAmount > 0) rs = 'blue';
    }
    
    return rs;
  };
  
  return (
    <>
      <div 
        className={ `transaction-item approved` }
        onClick={ () => onClickToNavigate() }
      >
        <div className="transaction-status">
          <div className={ `status-dot ${getDotClass()}`}></div>
        </div>
        <div className="transaction-content">
          { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
            <div className="transaction-title">{ `${merchantName}(${mid})` }</div>
          }
          { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
            <>
              <div className="transaction-title">{ `${approvalNumber}(${mid})` }</div>
              <div className="transaction-details">
                <span>{ (!!settlementDate)? t('settlement.settled'): (!!approvalDate)? t('settlement.approved') : '' }</span>
                <span className="separator">|</span>
                <span>{t('settlement.settlementShort')} { moment(settlementDate).format('MM.DD') }</span>
                <span className="separator">|</span>
                <span>{t('settlement.approvalShort')} { moment(approvalDate).format('MM.DD') }</span>
              </div>
            </>
          }
        </div>
        <div className="transaction-amount">
          {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || transactionAmount || 0) })}
        </div>
      </div>
    </>
  );
};