import * as React from "react";

type PagerProps = {
	onPageChange(index: number): void,
	onPageShift(shift: number): void,
	pageIndex: number,
	totalPages: number
}

export const Pager = ({ onPageChange, onPageShift, pageIndex, totalPages }: PagerProps) => {
	let pagerItems = [];
	for (let i = 0; i < totalPages; i++) {
		pagerItems.push(<a className={pageIndex == i ? 'active' : ''} style={{ cursor: "pointer" }}
			key={`pagerItem-${i}`}
			onClick={() => onPageChange(i)}>{i + 1}</a>);
	}

	// Here jebnou 1, az budes mit otestovano
	if (pagerItems.length > 1) {
		return (
			<React.Fragment>
				<div className="product__pagination">
					{(pageIndex - 1) >= 0
						? <a style={{ cursor: "pointer" }}
							onClick={() => onPageShift(-1)} ><i className="fas fa-angle-left"></i>
						</a>
						: ''
					}

					{pagerItems.map(item => item)}

					{(pageIndex + 1) < totalPages
						? <a style={{ cursor: "pointer" }}
							onClick={() => onPageShift(1)} ><i className="fas fa-angle-right"></i>
						</a>
						: ''
					}

				</div>
			</React.Fragment>
		);
	} else {
		return (<></>);
	}
}