nice-app-web/src/entities/transaction/ui/all-transaction-list.tsx

import { useEffect, useState } from 'react';
import { AllTransactionListProps, ListItemProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
import { useTranslation } from 'react-i18next';
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';

export const AllTransactionList = ({ 
  transactionCategory,
  listItems,
  setDetailData,
  onClickToOpenFilter,
  onClickToOpenDownloadBottomSheet
}: AllTransactionListProps) => {
  const { t, i18n } = useTranslation();

  const { groupDate, setGroupDate } = useGroupDateStore();
  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
  
  const [listHeight, setListHeight] = useState<number>(0);
  
  const getListDateGroup = () => {
    let rs = [];
    let date = '';
    let list: Array<ListItemProps> = [];
    for(let i=0;i<listItems.length;i++){
      let item = listItems[i];
      if(!!item){
        let transactionDateTime = item.transactionDateTime;
        let transactionDate = transactionDateTime?.substr(0, 8);
        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 }
                  setDetailData={ setDetailData }
                ></ListDateGroup>
              );
            }
            date = transactionDate;
            list = [];
          }
          list.push(item);
        }
      }
    }
    if(list.length > 0){
      rs.push(
        <ListDateGroup
          transactionCategory={ transactionCategory }
          key={ date + '-last' }
          date={ date }
          items={ list }
          setDetailData={ setDetailData }
        ></ListDateGroup>
      );
    }
    return rs;
  };

  const getMax = (data: Array<Record<string, any>>) => {
    let maxItem = null;
    if(data.length > 0){
      let numberArr = data.map((
        value: Record<string, any>, 
        index: number
      ) => {
        return value.top;
      });
      let max = Math.max(...numberArr);
      maxItem = data.filter((
        value: Record<string, any>, 
        index: number
      ) => {
        return value.top === max;
      });
    } 
    
    return maxItem? maxItem[0]: null;
  };

  const setScrollAction = (e: Event) => {
    let dateHeader = document.querySelectorAll('.date-header');
    let posData: Array<Record<string, any>> = [];
    dateHeader.forEach((value, index) => {
      let date: string = value.innerHTML;
      let top: number = value.getBoundingClientRect().top;
      if(top < 10){
        posData.push({
          date: date,
          top: top
        });
      }
    });
    let maxItem = getMax(posData);
    if(maxItem){
      setGroupDateOn(true);
      setGroupDate(maxItem.date);
    }
    else{
      setGroupDateOn(false);
      setGroupDate('');
    }
  };
    
  useEffect(() => {
    ListScrollOn(true);
    let heightList = GetListHeight();
    setListHeight(heightList.listHeight);

    let tabContent = document.querySelector('.tab-content');
    tabContent?.addEventListener('scroll', setScrollAction);
    
    return () => {
      ListScrollOn(false);
      tabContent?.removeEventListener('scroll', setScrollAction);
    };
  }, []);

  return (
    <>
      { groupDateOn &&
      <div className="summary-amount scroll-group-date">
        <span className="amount-text">{ groupDate }</span>
        <div className="summary-actions">
          <button className="filter-btn">
            <img
              src={ IMAGE_ROOT + '/ico_setting.svg' }
              alt={t('transaction.searchOptions')}
              onClick={ onClickToOpenFilter }
            />
          </button>
          <button className="download-btn">
            <img
              src={ IMAGE_ROOT + '/ico_download.svg' }
              alt={t('transaction.download')}
              onClick={ onClickToOpenDownloadBottomSheet }
            />
          </button>
        </div>
      </div>
      }
      <div 
        className="transaction-list"
        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
      >
        { getListDateGroup() }
      </div>  
    </>
  );
};