import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceiptListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';

export const CashReceiptList = ({ 
  transactionCategory,
  listItems 
}: CashReceiptListProps) => {
  const { navigate } = useNavigate();
  
  const getListDateGroup = () => {
    let rs = [];
    let date = '';
    let list = [];
    for(let i=0;i<listItems.length;i++){
      let item = listItems[i];
      if(!!item){
        let transactionDate = item.transactionDate;
        if(!!transactionDate){
          if(i === 0){
            date = transactionDate;
          }
          if(date !== transactionDate){
            if(list.length > 0){
              rs.push(
                <ListDateGroup
                  transactionCategory={ transactionCategory }
                  key={ date + '-' + i }
                  date={ date }
                  items={ list }
                ></ListDateGroup>
              );
            }
            date = transactionDate;
            list = [];
          }
          list.push(item);
        }
      }
    }
    if(list.length > 0){
      rs.push(
        <ListDateGroup
          transactionCategory={ transactionCategory }
          key={ date + '-last' }
          date={ date }
          items={ list }
        ></ListDateGroup>
      );
    }
    return rs;
  };

  const onClickToNavigate = () => {
    navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
  };

  return (
    <>
      <div className="transaction-list">
      { getListDateGroup() }
      </div>
      <div className="apply-row">
        <button 
          className="btn-50 btn-blue flex-1"
          onClick={ () => onClickToNavigate() }          
        >수기발행</button>
      </div>  
    </>
  );
};