import React, { FC, useEffect, useState } from 'react';
import { Pagination, Spin } from 'antd'
import cx from 'classnames';
import type { PaginationProps } from 'antd';

const ProductPagination: FC<any> = ({
	listMetaData,
	activeFilters,
	fetchProducts,
	setActiveFilters }) => {

	const [pageSize, setPageSize] = useState(activeFilters?.size || 30);
	const [totalData, setTotalData] = useState(0);
	const [pageNumber, setPageNumber] = useState(activeFilters?.page > 0 ? activeFilters?.page : 1);
	const [isLoading, setIsLoading] = useState(false);

	useEffect(() => {
		if (listMetaData && listMetaData.hits) {
			setTotalData(listMetaData.total.value);
		}
	}, [listMetaData])

	useEffect(() => {
		setPageNumber(activeFilters?.page > 0 ? activeFilters?.page : 1);
	}, [activeFilters?.page])

	useEffect(() => {
		if (totalData > 0) {
			activeFilters.from = (pageNumber == 1) ? 0 : ((pageNumber - 1) * pageSize) + 1;
			activeFilters.size = pageSize;
			activeFilters.page = pageNumber;
			setActiveFilters(activeFilters);
			fetchProducts(activeFilters);
		}
	}, [pageNumber, pageSize, totalData]) // Added totalData as a dependency

	const onPageSizeChange = (current: number, size: number) => {
		setPageNumber(1); // Reset pageNumber to 1 when pageSize changes
		setPageSize(size);
		const newActiveFilters = { ...activeFilters, size: size, page: 1 };
		setActiveFilters(newActiveFilters);
		fetchProducts(newActiveFilters);
	}

	const onPaginationChange: PaginationProps['onChange'] = (newCurrentPage) => {
		setPageNumber(newCurrentPage);
		const newActiveFilters = { ...activeFilters, size: pageSize, page: newCurrentPage };
		setActiveFilters(newActiveFilters);
		fetchProducts(newActiveFilters);
	}

	return (
		<div className="flex f-width justify-center h-20 items-center pb-20" style={{ width: "100%" }}>
			<Pagination
				style={{ marginTop: "0rem", marginBottom: "3.5rem" }}
				pageSize={pageSize}
				current={pageNumber}
				onChange={onPaginationChange}
				onShowSizeChange={onPageSizeChange}
				size="default"
				total={totalData}
				pageSizeOptions={['10', '20', '30', '50', '100']}
			/>
			<div
				className={cx("justify-center align-center")}
				style={{
					width: "100%",
					left: "50%",
					top: "50%",
					background: "tranparent",
					position: "fixed",
					transform: "translate(-25% , -50%)",
				}}
			>
				<Spin spinning={isLoading} size="large" />
			</div>
		</div>
	)
}

export default ProductPagination;