import React from "react";
import { Button } from "../../tremor/Button";
import { Text } from "../../tremor/Text";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../tremor/Select";

interface PaginationComponentProps {
    pagination: {
        currentPage: number;
        pageSize: number;
    };
    stats: {
        totalPages: number;
        totalRows: number; // Added totalRows to the stats property
    };
    setPagination: React.Dispatch<React.SetStateAction<{
        currentPage: number;
        pageSize: number;
    }>>;
    padding?: number;
}

export const PaginationComponent: React.FC<PaginationComponentProps> = ({
    pagination,
    stats,
    setPagination,
    padding
}) => {
    const { currentPage, pageSize } = pagination;
    const { totalPages } = stats;

    const handlePageSizeChange = (val: string) => {
        const newPageSize = parseInt(val) || 10;
        setPagination((prev) => ({ ...prev, pageSize: newPageSize }));
    };

    const handlePageChange = (val: string) => {
        const newPage = parseInt(val) || 1;
        if (newPage >= 1 && newPage <= totalPages) {
            setPagination((prev) => ({ ...prev, currentPage: newPage }));
        }
    };

    const handlePreviousPage = () => {
        setPagination((prev) =>
            prev.currentPage > 1
                ? { ...prev, currentPage: prev.currentPage - 1 }
                : prev
        );
    };

    const handleNextPage = () => {
        setPagination((prev) =>
            prev.currentPage < totalPages
                ? { ...prev, currentPage: prev.currentPage + 1 }
                : prev
        );
    };

    return (
        <Text style={{ padding: `0px ${(padding)}px` }} className="onvo-flex onvo-flex-row onvo-text-sm onvo-items-center onvo-gap-2 onvo-w-full onvo-mt-0 onvo-px-2">
            Display{" "}
            <Select
                value={pageSize + ""}
                onValueChange={(val) => handlePageSizeChange(val)}
            >
                <SelectTrigger className="onvo-w-20 onvo-max-w-20 !onvo-py-1">
                    <SelectValue placeholder="10" />
                </SelectTrigger>
                <SelectContent>
                    {[100, 500, 1000].map((option) => (
                        <SelectItem key={option + ""} value={option + ""}>
                            {option + ""}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
            Page{" "}
            <Select
                value={currentPage + ""}
                onValueChange={(val) => handlePageChange(val)}
            >
                <SelectTrigger className="onvo-w-20 onvo-max-w-20 !onvo-py-1">
                    <SelectValue placeholder="1" />
                </SelectTrigger>
                <SelectContent>
                    {new Array(totalPages).fill(0).map((_, i) => (
                        <SelectItem key={i + ""} value={(i + 1) + ""}>
                            {i + 1}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
            of {totalPages}
            <div className="onvo-flex-grow"></div>
            <Button
                variant="secondary"
                className="!onvo-py-1"
                onClick={handlePreviousPage}
                disabled={currentPage <= 1}
            >
                Previous
            </Button>
            <Button
                variant="secondary"
                className="!onvo-py-1"
                onClick={handleNextPage}
                disabled={currentPage >= totalPages}
            >
                Next
            </Button>
        </Text>
    );
};