import { Button } from "@/components/ui/button";
import {
  faAngleDoubleLeft,
  faAngleDoubleRight,
  faAngleLeft,
  faAngleRight,
} from "@fortawesome/free-solid-svg-icons";
import React from "react";

const getButtons = ({ count, pageSize, pageIndex }) => [
  { index: 0, icon: faAngleDoubleLeft, disabled: pageIndex === 0 },
  { index: pageIndex - 1, icon: faAngleLeft, disabled: pageIndex === 0 },
  {
    index: pageIndex + 1,
    icon: faAngleRight,
    disabled: pageIndex >= Math.floor(count / pageSize) - 1,
  },
  {
    index: Math.floor(count / pageSize),
    icon: faAngleDoubleRight,
    disabled: pageIndex >= Math.floor(count / pageSize) - 1,
  },
];

const PaginationButton = React.memo(
  ({
    icon,
    index,
    disabled,
    listInactive,
    onPageChange,
  }: FooterButtonProps) => (
    <Button
      variant="soft"
      color="primary"
      size="xs"
      decorator={icon}
      isIcon
      disabled={disabled || listInactive}
      onClick={() => onPageChange(index)}
    />
  ),
);
PaginationButton.displayName = "PaginationButton";

export const Pagination = React.memo(
  ({ count, filters, setFilters, listInactive }: any) => {
    const { pageSize, pageIndex } = filters.pagination;

    const handlePageIndexChange = React.useCallback(
      (index) => {
        setFilters((prev) => ({
          ...prev,
          pagination: { ...prev.pagination, pageIndex: index },
        }));
      },
      [setFilters],
    );

    return getButtons({ count, pageSize, pageIndex }).map((e, i) => (
      <PaginationButton
        key={i}
        listInactive={listInactive}
        onPageChange={handlePageIndexChange}
        {...e}
      />
    ));
  },
);
Pagination.displayName = "Pagination";