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

export const PayoutList = ({
	additionalServiceCategory,
	listItems,
	searchDateType,
	mid,
	setDetailData,
	filterUsed,
	onClickToOpenFilter,
	onClickToOpenDownloadBottomSheet
}: PayoutListProps) => {
	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 itemDateStr = '';
			if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
				itemDateStr = listItems[i]?.requestDate || '';
			}
			else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
				itemDateStr = listItems[i]?.settlementDate || '';
			}
			let itemDate = itemDateStr.substring(0, 8);
			if (i === 0) {
				date = itemDate;
			}
			if (date !== itemDate) {
				if (list.length > 0) {
					rs.push(
						<ListDateGroup
							additionalServiceCategory={additionalServiceCategory}
							mid={mid}
							key={date + '-' + i}
							date={date}
							items={list}
							setDetailData={setDetailData}
						></ListDateGroup>
					);
				}
				date = itemDate;
				list = [];
			}
			list.push(listItems[i] as any);
		}
		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>
			}
			<section
				className="transaction-list"
			>
				{getListDateGroup()}
			</section>
		</>
	);

};