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

export const BillingList = ({
  transactionCategory,
  listItems,
  setDetailData,
  filterUsed,
  onClickToOpenFilter,
  onClickToOpenDownloadBottomSheet
}: BillingListProps) => {
  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 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 }
                  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;
  };
    
  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"
        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
      >
        { getListDateGroup() }
      </div>    
    </>
  );
};