"use client";
import { useParseFloat } from "@/utils/lib/helpers";
import { Pagination } from "flowbite-react";
import { FC } from "react";
import ItemPerPage from "./item-per-page";

type props = {
  pagination: any;
  currentPage: number;
  onPageChange: (page: number) => void;
  keys?: string;
};
const CustomPagination: FC<props> = ({
  pagination,
  currentPage,
  onPageChange = () => {},
  keys = null,
}) => {
  const startIndex = () => {
    if (pagination?.current_page === 1) {
      return 1;
    }
    const current = useParseFloat(pagination?.current_page - 1);
    const per_page = useParseFloat(pagination?.per_page);
    return useParseFloat(current * per_page) + 1;
  };
  const endIndex = () => {
    if (pagination?.total_pages === pagination?.current_page) {
      return pagination?.total;
    }
    return (
      useParseFloat(pagination?.count) * useParseFloat(pagination?.current_page)
    );
  };
  return (
    <>
      {pagination?.total ? (
        <div className="grid grid-cols-1 gap-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 pb-10 mt-2">
          <div className="flex justify-start md:justify-start lg:justify-start order-3 md:order-1 lg:order-1">
            <div className="flex">
              <Pagination
                className="ml-2 mt-2"
                layout="navigation"
                currentPage={currentPage}
                totalPages={pagination?.total_pages || 0}
                onPageChange={onPageChange}
                showIcons
                nextLabel=""
                previousLabel=""
              />
              <div className="ml-2 mt-5">
                <p className="text-gray-500 dark:text-gray-100 mt-0.5">
                  Showing
                  <span className="ml-2 mr-1 mt-1 text-gray-900 dark:text-gray-400">
                    {startIndex()} - {endIndex()}
                  </span>
                  of{" "}
                  <span className="text-gray-900 dark:text-gray-400">
                    {pagination?.total}
                  </span>
                </p>
              </div>
            </div>
          </div>
          <div className="mt-3 flex justify-start md:justify-center lg:justify-center order-2">
            <div className="flex">
              <label
                htmlFor=""
                className="mt-1 block mr-2 text-gray-500 dark:text-gray-400"
              >
                {/* Items Per Page */}
              </label>
              <div className="w-[100px]">
                {pagination?.per_page && (
                  <ItemPerPage per_page={pagination?.per_page} keys={keys} />
                )}
              </div>
            </div>
          </div>
          <div className="order-1 md:order-3 lg:order-3">
            <div className="flex justify-start ml-2 md:justify-end lg:justify-end">
              <Pagination
                currentPage={currentPage}
                totalPages={pagination?.total_pages || 0}
                onPageChange={onPageChange}
                className="mr-2 mt-2 text-blue-900 sm:justify-end"
                showIcons
                color="blue"
                nextLabel=""
                previousLabel=""
              />
            </div>
          </div>
        </div>
      ) : (
        <div className="p-4 text-center bg-gray-200">
          Not enough data to show
        </div>
      )}
    </>
  );
};

export default CustomPagination;