import React, { useCallback, PropsWithChildren } from "react";
import { useTranslations } from "next-intl";
import { Loader2 } from "lucide-react";
import { CheckedState } from "@radix-ui/react-checkbox";
import { ResourcePickerContext } from "@/components/ui/resource-picker/resource-picker-context";
import { cn } from "@/lib/utils/cn";
import useInfiniteLoad from "@/hooks/use-infinite-load";

type ResourcePickerListProps = PropsWithChildren<{
    className?: string;
    multiple?: boolean;
    selected?: string[];
    isFetching?: boolean;
    hasNextPage?: boolean;
    fetchNextPage?: () => void;
    onChange?: (selected: string[]) => void;
}>;

export const ResourcePickerList: React.FC<ResourcePickerListProps> = (props) => {
    const t = useTranslations("dashboard.general.dataset");
    const {
        className,
        multiple,
        selected = [],
        hasNextPage = false,
        isFetching = false,
        children,
        fetchNextPage = () => undefined,
        onChange
    } = props;

    const loaderRef = useInfiniteLoad({
        hasNextPage,
        isFetching,
        fetchNextPage
    });

    const handleSelect = useCallback((id: string, checked: CheckedState) => {
        if(!onChange) {
            return;
        }

        if(!multiple) {
            return onChange(checked ? [id] : []);
        }

        if(checked) {
            return onChange(selected.includes(id) ? selected : [...selected, id]);
        }

        return onChange(selected.includes(id) ? selected.filter((sid) => sid !== id) : selected);
    }, [selected, multiple, onChange]);

    return (
        <ResourcePickerContext.Provider
          value={{
            selected,
            select: handleSelect
          }}>
            <div
              className={cn("flex-1 overflow-x-hidden overflow-y-auto h-full", className)}>
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 gap-2">
                    {children}
                </div>

                <div className="mt-4">
                    {isFetching && (
                        <Loader2 className="mx-auto size-8 animate-spin text-muted-foreground" />
                    )}

                    {hasNextPage ? (
                        <div
                          ref={loaderRef}
                          className="size-1"
                          id="next-page-loader" />
                    ) : (
                        <p className="py-4 text-center text-sm text-muted-foreground">{t("noMoreItems")}</p>
                    )}
                </div>
            </div>
        </ResourcePickerContext.Provider>
    );
};