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

export const ListItem = ({
  tid,
  mid,
  stateDate,
  stateCode,
  stateName,
  installmentMonth,
  serviceCode,
  serviceName,
  serviceDetailName,
  goodsAmount
}: ListItemProps) => {
  const { navigate } = useNavigate();
  const getItemClass = () => {
    let rs = '';
    if(stateCode === '0'){
      rs = '';
    }
    else if(stateCode === '1'){
      rs = 'approved';
    }
    else if(stateCode === '2'){
      rs = 'refund';
    }
    return rs;
  };

  const getDotClass = (str?: string) => {
    let rs = '';
    if(stateCode === '0'){
      rs = '';
    }
    else if(stateCode === '1'){
      rs = 'blue';
    }
    else if(stateCode === '2'){
      rs = 'gray';
    }
    return rs;
  };

  const onClickToNavigate = () => {
    navigate(PATHS.settlement.detail + tid, {
      state: {
        tid: tid
      }
    });
  };
  
  const getTime = () => {
    let time = stateDate?.substring(8, 12);
    let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    return timeStr;
  };

  return (
    <>
      <div 
        className={ `transaction-item ${getItemClass()}` }
        onClick={ () => onClickToNavigate() }
      >
        <div className="transaction-status">
          <div className={ `status-dot ${getDotClass()}`}></div>
        </div>
        <div className="transaction-content">
          <div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
          <div className="transaction-details">
            <span>{ stateName }</span>
            <span className="separator">|</span>
            <span>{ getTime() }</span>
            <span className="separator">|</span>
            <span>{ mid }</span>
            { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
              <>
                <span className="separator">|</span>
                <span>{ installmentMonth }개월 할부</span>
              </>
            }
          </div>
        </div>
        <div className="transaction-amount">
          { 
            <NumericFormat
              value={ goodsAmount } 
              thousandSeparator
              displayType="text"
              suffix={ '원' }
            ></NumericFormat> 
          }
        </div>
      </div>
    </>
  );
};
