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

export interface CalendarSettlementItemProps {
  list: Array<SettlementDays | undefined>;
  settlementStatus: SettlementStatus;
};

export const CalendarSettlementItem = ({
  list,
  settlementStatus
}: CalendarSettlementItemProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();

  const getAmount = (
    scheduledAmount: number | undefined, 
    completedAmount: number | undefined
  ) => {
    let amount = 0;
    if(settlementStatus === SettlementStatus.SCHEDULED){
      amount = scheduledAmount || 0;
    }
    else if(settlementStatus === SettlementStatus.COMPLETED){
      amount = completedAmount || 0;
    }
    return amount;
  };

  const getClassName = () => {
    let className = '';
    if(settlementStatus === SettlementStatus.SCHEDULED){
      className = 'scheduled';
    }
    else if(settlementStatus === SettlementStatus.COMPLETED){
      className = 'complete';
    }
    return className;
  };

  const onClickToMoveList = (settlementDate?: string) => {
    if(!!settlementDate){
      navigate(PATHS.settlement.list, {
        state: {
          startDate: settlementDate,
          endDate: settlementDate
        }
      });
    }
  };

  return (
    <>
      { list.map((value, index) => (
        <div 
          key={ `settlement-item-${index}` }
          className="settlement-item"
          onClick={ () => onClickToMoveList(value?.settlementDate) }
        >
          <div className={ `settlement-tag ${getClassName()}` }>{ value?.settlementStatus }</div>
          <div className="settlement-date">
            { moment(value?.settlementDate).format('MM.DD(ddd)') }
          </div>
          <div className="settlement-amount">
            <NumericFormat
              value={ getAmount(value?.scheduledAmount, value?.completedAmount) }
              thousandSeparator
              displayType="text"
              suffix={t('common.currencyUnit')}
            ></NumericFormat>
          </div>
        </div>
        ))
      }

      
    </>
  )
};