import React, { FC, useEffect, useState } from 'react';

import { Pagination, Spin } from 'antd'
import cx from 'classnames';

const ProductPagination: FC<any> = ({
	listMetaData,
	activeFilters,
	fetchProducts,
	setActiveFilters }) => {
	const [pageSize, setPageSize] = useState(30);
	const [totalData, setTotalData] = useState(0);
	const [pageNumber, setPageNumber] = useState(1);
	const [isLoading,setIsLoading] = useState(false);
	useEffect(() => {
		if (listMetaData) {
			setTotalData(listMetaData.total)
			setPageNumber(listMetaData.current_page)
		}
	}, [listMetaData, pageSize])
	const onPaginationChange = (newCurrentPage: number) => {
		setIsLoading(true);
		setPageNumber(newCurrentPage);
		fetchProducts({ ...activeFilters, page: newCurrentPage, limit: pageSize })
		setTimeout(() => {
			setIsLoading(false);
		}, 1000);
	}

	const onPageSizeChange = (current: number, size: number) => {
		setIsLoading(true);
		setPageSize(size)
		fetchProducts({ ...activeFilters, page: current, limit: size })
		setActiveFilters({ ...activeFilters, page: current, limit: size })
		setTimeout(() => {
			setIsLoading(false);
		}, 1000);
	}

	return (
		<div className="flex f-width justify-center h-20 items-center pb-20">
			<Pagination
			style={{marginBottom:"3rem"}}
				pageSize={pageSize}
				onChange={onPaginationChange}
				current={pageNumber}
				total={totalData}
				onShowSizeChange={onPageSizeChange}
			/>
			<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;