import { useRouter } from "next/router";
import React, { useState } from "react";
import { useEffect } from "react";
import styles from "../../styles/exos/Paginaton.module.scss";
import { parseClassName } from "../../utils/utils.js";

export function Pagination({ setPage, page, pages }) {
  var pages = new Array(pages - 1).fill(0).reduce(
    (p, n, i) => {
      return [...p, i + 2];
    },
    [1]
  );
  const router = useRouter();
  return (
    <div className={styles.pagination}>
      {page != 1 && (
        <p
          onClick={() => {
            setPage(page - 1);
            var exo = router.query.exo || [];
            router.push(
              {
                pathname:
                  "/exercices/" + exo.join("/"),
                query: { page: page - 1 },
              },
              undefined,
              { shallow: true }
            );
          }}
          className={styles["pagination-page"]}
        >
          «
        </p>
      )}

      {pages.length <= 9 &&
        pages.map((p, i) => {
          return (
            <p
              key={i}
              onClick={() => {
                setPage && setPage(p);
                var exo = router.query.exo || [];
                router.push(
                  {
                    pathname:
                      "/exercices/" + exo.join("/"),
                    query: { page: p },
                  },
                  undefined,
                  { shallow: true }
                );
              }}
              className={parseClassName([
                styles["pagination-page"],
                page == p ? styles["pagination-page-active"] : undefined,
              ])}
            >
              {p}
            </p>
          );
        })}
      {pages.length > 9 && (
        <>
          {page >= 6 && (
            <>
              <p
                onClick={() => {
                  setPage(pages[0]);
                  var exo = router.query.exo || [];
                  router.push(
                    {
                      pathname:
                        "/exercices/" + exo.join("/"),
                      query: { page: pages[0] },
                    },
                    undefined,
                    { shallow: true }
                  );
                }}
                className={styles["pagination-page"]}
              >
                {pages[0]}
              </p>
              <p>...</p>
            </>
          )}
          {pages
            .slice(
              page < 6 ? 0 : page - 2,
              page < 4
                ? 5
                : page + 1 > pages.length - 4
                ? pages.length
                : page + 3
            )
            .map((p) => {
              
              return (
                <p
                  onClick={() => {
                    setPage(p);
                    var exo = router.query.exo || [];
                    router.push(
                      {
                        pathname:
                          "/exercices/" + exo.join("/"),
                        query: { page: p },
                      },
                      undefined,
                      { shallow: true }
                    );
                  }}
                  className={parseClassName([
                    styles["pagination-page"],
                    page == p ? styles["pagination-page-active"] : undefined,
                  ])}
                >
                  {p}
                </p>
              );
            })}
          {page + 1 <= pages.length - 4 && (
            <>
              <p>...</p>
              <p
                className={parseClassName([
                  styles["pagination-page"],
                  page == pages[pages.length - 1] - 1
                    ? styles["pagination-page-active"]
                    : undefined,
                ])}
                onClick={() => {
                  setPage(pages[pages.length - 1]);
                  var exo = router.query.exo || [];
                  router.push(
                    {
                      pathname:
                        "/exercices/" + router.query.exo &&
                        router.query.exo.join("/"),
                      query: { page: pages[pages.length - 1] },
                    },
                    undefined,
                    { shallow: true }
                  );
                }}
              >
                {pages[pages.length - 1]}
              </p>
            </>
          )}
        </>
      )}
      {page != pages.length && (
        <p
          onClick={() => {
            setPage(page + 1);
            var exo = router.query.exo || [];
            console.log("PATHNAME", "/exercices/" + exo.join("/"));
            router.push(
              {
                pathname: "/exercices/" + exo.join("/"),
                query: { page: parseInt(page) + 1 },
              },
              undefined,
              { shallow: true }
            );
          }}
          className={styles["pagination-page"]}
        >
          »
        </p>
      )}
    </div>
  );
}