import React, { useState } from "react";
import cx from "classnames";
import usePagination from "@mui/material/usePagination";
import { Grid, Pagination as MaterialPagination } from "@mui/material";
import { useLocale } from "../../../hooks/useLocale";
import './styles.scss'

export const Pagination = (props: any) => {
  const availablePages = Math.ceil(props.count / props.rowsPerPage);
  const labels = {
    previous: useLocale("previous"),
    next: useLocale("next"),
    all: useLocale("all"),
    per_page: useLocale("per_page")
  }
  const [allRows, setAllRows] = useState(false);

  const handleChangeRowsPerPage = (rowsPerPage: any) => {
    const { onChangeRowsPerPage } = props;
    if (rowsPerPage == "ALL") {
      setAllRows(true);
    } else {
      setAllRows(false);
    }

    if (onChangeRowsPerPage) {
      onChangeRowsPerPage(rowsPerPage);
    }
  };

  const { items } = usePagination({
    count: availablePages,
    page: props.page,
    onChange: props.onChangePage,
    hideNextButton: props.hideNextButton || false,
  });


  return (
    <div className="gtc-rc-pagination-container">
      <Grid
        container
        direction="row"
        justifyContent="space-between"
        alignItems="center"
      >
        {allRows ? (
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            lg={4}
            container
            direction="row"
            justifyContent="flex-start"
            alignItems="flex-start"
            className="gtc-rc-pagination-controls"
          ></Grid>
        ) : (
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            lg={4}
            container
            direction="row"
            justifyContent="flex-start"
            alignItems="flex-start"
            className="gtc-rc-pagination-controls"
          >
            <MaterialPagination
              style={{ display: "none" }}
              count={availablePages}
              page={props.page}
              onChange={props.onChangePage}
              color="secondary"
            />

            <ul className={props.onlyLine ? "gtc-rc-onlyLine" : "gtc-rc-MuiPagination-ul"}>
              {items.map(({ page, type, selected, ...item }, index) => {
                let children = null;

                if (type === "start-ellipsis" || type === "end-ellipsis") {
                  children = "…";
                } else if (type === "page") {
                  children = (
                    <button
                      type="button"
                      className={cx(
                        "gtc-rc-pagination-page-button",
                        selected && "gtc-rc-pagination-page-button-selected"
                      )}
                      {...item}
                    >
                      {page}
                    </button>
                  );
                } else {
                  children = (
                    <button type="button" className="gtc-rc-btn-link" {...item}>
                      {type === "previous"
                        ? labels["previous"]
                        : labels["next"]
                      }
                    </button>
                  );
                }

                return <li key={index}>{children}</li>;
              })}
            </ul>
          </Grid>
        )}

        <Grid
          item
          xs={12}
          sm={12}
          md={12}
          lg={props.children ? 2 : 4}
          container
          direction="row"
          justifyContent="center"
          alignItems="flex-start"
        >
          <div>
            <span className="gtc-rc-page-circle gtc-rc-cursor-auto">
              Total: {props.count}
            </span>
          </div>
        </Grid>

        {props.children ? (
          <Grid
            item
            xs={2}
            sm={2}
            md={2}
            lg={2}
            container
            direction="row"
            alignItems="flex-start"
            justifyContent="flex-start"
          >
            {props.children}
          </Grid>
        ) : (
          <></>
        )}

        <Grid
          item
          xs={12}
          sm={12}
          md={12}
          lg={4}
          container
          direction="row"
          justifyContent="flex-end"
          alignItems="flex-start"
          className="gtc-rc-pagination-controls"
        >
          <>
            {!props.valuesPerPage ? (
              //Default values
              <>
                <span
                  className={`gtc-rc-page-circle ${
                    props.rowsPerPage == 10 ? "gtc-rc-page-circle-active" : ""
                  }`}
                  onClick={() => handleChangeRowsPerPage(10)}
                >
                  10
                </span>

                <span
                  className={`gtc-rc-page-circle ${
                    props.rowsPerPage == 25 ? "gtc-rc-page-circle-active" : ""
                  }`}
                  onClick={() => handleChangeRowsPerPage(25)}
                >
                  25
                </span>

                <span
                  className={`gtc-rc-page-circle ${
                    props.rowsPerPage == 50 ? "gtc-rc-page-circle-active" : ""
                  }`}
                  onClick={() => handleChangeRowsPerPage(50)}
                >
                  50
                </span>
              </>
            ) : (
              //Array to pagination items
              props.valuesPerPage.map((element: any, index: any) => {
                return (
                  <span
                    key={index}
                    className={`gtc-rc-page-circle ${
                      props.rowsPerPage == element ? "gtc-rc-page-circle-active" : ""
                    }`}
                    onClick={() => handleChangeRowsPerPage(element)}
                  >
                    {element}
                  </span>
                );
              })
            )}

            {!props.hideAllInPagination && (
              <span
                className={`gtc-rc-page-circle ${
                  props.rowsPerPage == props.count || allRows
                    ? "gtc-rc-page-circle-active"
                    : ""
                }`}
                onClick={() => handleChangeRowsPerPage("ALL")}
              >
                {labels["all"]}
              </span>
            )}

            <span className={`gtc-rc-page-circle gtc-rc-cursor-auto`}>
              {labels["per_page"]}
            </span>
          </>
        </Grid>
      </Grid>
    </div>
  );
};
