import type { ComponentProps, Dispatch, SetStateAction } from "react";
import _ from "lodash";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { twMerge } from "tailwind-merge";
import Row from "../layout/Row";
import Button from "../layout/Button";
import EmptyContent from "./EmptyContent";
import Span from "../layout/Span";

type Props = ComponentProps<typeof Row> & {
    page?: number;
    setPage?: Dispatch<SetStateAction<number>>;
    count?: number;
    limit?: number;
};

/**
 * # Pagination Component
 * @param param0
 * @returns
 */
export default function Pagination({
    count,
    page,
    setPage,
    limit,
    ...props
}: Props) {
    if (!page || !limit)
        return <EmptyContent title={`page and limit are both required`} />;

    if (!count) return null;

    const isLimit = limit * page >= count;

    const pages = Math.ceil(count / limit);

    const next_button = (
        <Button
            title="Next Page Button"
            onClick={() => {
                window.scrollTo({ top: 0, behavior: "smooth" });
                setPage?.((prev) => prev + 1);
            }}
            variant="outlined"
            size="small"
            className="p-1"
            disabled={isLimit}
        >
            <ChevronRight size={20} />
        </Button>
    );

    return (
        <Row
            {...props}
            className={twMerge(
                "w-full justify-between md:flex-nowrap",
                props.className,
            )}
        >
            {pages > 1 && (
                <Button
                    title="Previous Page Button"
                    onClick={() => {
                        window.scrollTo({ top: 0, behavior: "smooth" });
                        setPage?.((prev) => prev - 1);
                    }}
                    variant="outlined"
                    size="small"
                    className="p-1"
                    disabled={page == 1}
                >
                    <ChevronLeft size={20} />
                </Button>
            )}

            {pages > 1 && <div className="flex md:hidden">{next_button}</div>}

            <Row
                className={twMerge(
                    "gap-6 w-full md:flex-nowrap justify-center",
                )}
            >
                <Span
                    size="small"
                    variant="faded"
                    className="whitespace-nowrap"
                >
                    Page {page} / {pages}
                </Span>
                {pages > 1 && (
                    <Row
                        className={twMerge(
                            "flex-nowrap overflow-x-auto p-1 max-w-[90%]",
                        )}
                    >
                        {Array(pages)
                            .fill(0)
                            .map((p, index) => {
                                const isCurrent = page == index + 1;

                                return (
                                    <Button
                                        title={`Page ${index + 1}`}
                                        onClick={() => {
                                            window.scrollTo({
                                                top: 0,
                                                behavior: "smooth",
                                            });
                                            setPage?.(index + 1);
                                        }}
                                        variant={
                                            isCurrent ? "normal" : "outlined"
                                        }
                                        size="small"
                                        color={isCurrent ? "primary" : "gray"}
                                        className={twMerge(
                                            "p-1 w-6 h-6 min-w-6",
                                        )}
                                        key={index}
                                    >
                                        {index + 1}
                                    </Button>
                                );
                            })}
                    </Row>
                )}
            </Row>

            {pages > 1 && <div className="hidden md:flex">{next_button}</div>}
        </Row>
    );
}