import React from 'react';
import { Pagination } from 'antd';
import Link from 'next/link'
import { getQueryStringValue } from './query-string';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
//@ts-ignore
import isEmpty from 'lodash/isEmpty';

const
	Paginator = ({ entity, scrollToComponent }: { entity? : any, scrollToComponent? : any}) => {
		const
			itemRender = (current : any, type : any, originalElement : any) => {
				if (type === 'prev') {
					return <Link href={'?page=' + current}><LeftOutlined /></Link>;
				}
				if (type === 'next') {
					return <Link href={'?page=' + current}><RightOutlined /></Link>;
				}
				if (type === 'page') {
					return <Link href={'?page=' + current}>{current}</Link>;
				}
				return originalElement;
			},
			changeHandler = (pgnum : any) => scrollToComponent ? scrollToComponent.current.scrollIntoView() : null;

		return isEmpty(entity)
			? (<></>)
			: (
				<Pagination
					defaultPageSize={Number(entity?.per_page)}
					showSizeChanger={false}
					responsive
					onChange={changeHandler}
					itemRender={itemRender}
					defaultCurrent={Number(getQueryStringValue('page')) ?? 1}
					total={entity?.total} />
			);
	};

export default Paginator;



export const paginatorEffects = () => [getQueryStringValue('page'), getQueryStringValue('sort')];