import styles from './blog-pagination.module.scss';
import {useRouter} from "next/router";

/* eslint-disable-next-line */
export interface BlogPaginationProps {
  paginator: any;
}

export function BlogPagination({paginator}: BlogPaginationProps) {
  const router = useRouter();
  const {total, pageCount, page} = paginator.pagination;
  const isOnlyOne = pageCount > 0 && pageCount === 1;
  const isEmpty = total === 0;
  const isFirst = page === 1;
  const isLast = page === pageCount;
  const goPrevious = async () => {
    await router.push(`${window.location.origin}${window.location.pathname}?page=${page - 1}`);
  }

  const goNext = async () => {
    await router.push(`${window.location.origin}${window.location.pathname}?page=${page + 1}`);
  }

  return (
    <div className={styles['container']}>
      <div className="flex flex-col items-center">
        {isOnlyOne && !isEmpty && (
          <span className="text-sm text-gray-700 dark:text-gray-400">{total} article(s)</span>)}
        {!isOnlyOne && !isEmpty && (<span className="text-sm text-gray-700 dark:text-gray-400">
          Articles <span className="font-semibold text-gray-900 dark:text-white">{page}</span> à <span
          className="font-semibold text-gray-900 dark:text-white">{pageCount}</span> sur un total de <span
          className="font-semibold text-gray-900 dark:text-white">{total}</span>
        </span>)}
        <div className="inline-flex mt-2 xs:mt-0">
          <button
            disabled={isOnlyOne || isFirst || isEmpty}
            onClick={goPrevious}
            className="
            inline-flex items-center px-4 py-2 mr-2 text-sm font-medium rounded
            text-white bg-gray-800
            hover:bg-gray-900
            disabled:bg-gray-500 disabled:hover:bg-gray-500
            dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
            <svg aria-hidden="true" className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd"
                    d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
                    clipRule="evenodd"></path>
            </svg>
            Prev
          </button>
          <button
            disabled={isOnlyOne || isLast || isEmpty}
            onClick={goNext}
            className="inline-flex items-center px-4 py-2 ml-2 text-sm font-medium rounded
            text-white bg-gray-800
            hover:bg-gray-900
            disabled:bg-gray-500 disabled:hover:bg-gray-500
            dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
            Next
            <svg aria-hidden="true" className="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd"
                    d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                    clipRule="evenodd"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
}

export default BlogPagination;