import moment from 'moment';
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';
import { useState } from 'react';

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

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

  const [newList, setNewList] = useState<Array<SettlementDays | undefined>>(list);

  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
        }
      });
    }
  };

  const getStatusName = (settlementStatus?: SettlementStatus) => {
    let title = '';
    if(settlementStatus === SettlementStatus.COMPLETED){
      title = '정산 확정';
    }
    else if(settlementStatus === SettlementStatus.SCHEDULED){
      title = '정산 예정';
    }
    return title;
  };
  
  const showFilterDate = () => {
    let rs = [];
    for(let i=0;i<newList.length;i++){
      let item = newList[i];
      if(filterDate && filterDate > 0){
        let shortDate = item?.settlementDate.substring(6, 8);
        if(shortDate){
          let checkDate = parseInt(shortDate);
          if(filterDate !== checkDate){
            continue;
          }
        }
      }
      rs.push(
        <div 
          key={ `settlement-item-${i}` }
          className="settlement-item"
          onClick={ () => onClickToMoveList(item?.settlementDate) }
        >
          <div className={ `settlement-tag ${getClassName()}` }>{ getStatusName(item?.settlementStatus) }</div>
          <div className="settlement-date">
            { moment(item?.settlementDate).format('MM.DD(ddd)') }
          </div>
          <div className="settlement-amount">
            {t('home.money', { value: new Intl.NumberFormat('en-US').format(getAmount(item?.scheduledAmount, item?.completedAmount)) })}
          </div>
        </div>
      );
    }
    return rs;
  };
  
  return (
    <>
      { showFilterDate() }
    </>
  )
};