nice-app-web/src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx

import { useTranslation } from 'react-i18next';
import { LinkPaymentWaitListProps } from '../../model/link-pay/types';
import { ListDateGroup } from '../list-date-group';
import { useEffect, useState } from 'react';
import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';

export const LinkPaymentWaitList = ({
  additionalServiceCategory,
  listItems,
  mid,
  setDetailData,
  filterUsed,
  onClickToOpenFilter,
  onClickToOpenDownloadBottomSheet
}: LinkPaymentWaitListProps) => {
  const { t, i18n } = useTranslation();

  const [groupDate, setGroupDate] = useState<string>('');
  const [groupDateOn, setGroupDateOn] = useState<boolean>(false);

  const [listHeight, setListHeight] = useState<number>(0);

  const getListDateGroup = () => {
    let rs = [];
    let date = '';
    let list = [];
    for (let i = 0; i < listItems.length; i++) {
      let items = listItems[i];
      if (!!items) {
        let scheduledSendDate = items?.scheduledSendDate;
        scheduledSendDate = scheduledSendDate?.substring(0, 8);
        if (!!scheduledSendDate) {
          if (i === 0) {
            date = scheduledSendDate;
          }
          if (date !== scheduledSendDate) {
            if (list.length > 0) {
              rs.push(
                <ListDateGroup
                  additionalServiceCategory={additionalServiceCategory}
                  key={date + '-' + i}
                  mid={mid}
                  date={date}
                  items={list}
                  setDetailData={setDetailData}
                ></ListDateGroup>
              );
            }
            date = scheduledSendDate;
            list = [];
          }
          list.push(items);
        }
      }
    }
    if (list.length > 0) {
      rs.push(
        <ListDateGroup
          additionalServiceCategory={additionalServiceCategory}
          mid={mid}
          key={date + '-last'}
          date={date}
          items={list}
          setDetailData={setDetailData}
        ></ListDateGroup>
      );
    }
    return rs;
  };

  useEffect(() => {
    ListScrollOn(true);
    let heightList = GetListHeight();
    setListHeight(heightList.listHeight);

    let tabContent = document.querySelector('.tab-content');
    tabContent?.addEventListener('scroll', (e: Event) => {
      setScrollAction(e, setGroupDate, setGroupDateOn);
    });

    return () => {
      ListScrollOn(false);
      tabContent?.removeEventListener('scroll', (e: Event) => {
        setScrollAction(e, setGroupDate, setGroupDateOn);
      });
    };
  }, []);

  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}
              />
              {filterUsed &&
                <span className="notification-badge2"></span>
              }
            </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"
      >
        {getListDateGroup()}
      </div>
    </>
  )
};