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';

export const ListItem = ({
  periodType,
  settlementId,
  settlementDate,
  merchantName,
  mid,
  tid,
  settlementAmount,
  approvalNumber,
  approvalDate,
  transactionAmount
}: ListItemProps) => {
  const { navigate } = useNavigate();
  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,
      }
    });
  };
  
  return (
    <>
      <div 
        className={ `transaction-item approved` }
        onClick={ () => onClickToNavigate() }
      >
        <div className="transaction-status">
          <div className={ `status-dot blue`}></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)? '정산': (!!approvalDate)? '승인' : '' }</span>
                <span className="separator">|</span>
                <span>정산 { moment(settlementDate).format('MM.DD') }</span>
                <span className="separator">|</span>
                <span>승인 { moment(approvalDate).format('MM.DD') }</span>
              </div>
            </>
          }
        </div>
        <div className="transaction-amount">
          { 
            <NumericFormat
              value={ settlementAmount || transactionAmount } 
              thousandSeparator
              displayType="text"
              suffix='원'
            ></NumericFormat> 
          }
        </div>
      </div>
    </>
  );
};