import React, { useState, useEffect, useCallback } from "react";
import { UserIcon } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
    DialogClose,
    DialogTrigger
} from "@/components/ui/dialog";
import { ResourceListFilters } from "@/components/ui/resource-list/resource-list-filters";
import { ResourcePickerItem } from "@/components/ui/resource-picker/resource-picker-item";
import { ResourcePickerList } from "@/components/ui/resource-picker/resource-picker-list";
import { api } from "@/lib/trpc/client";

type Filters = {
    search?: string;
};

type Props = {
    multiple?: boolean;
    selected: string[];
    onSelect?: (ids: string[]) => void;
};

export const ProfilePicker: React.FC<Props> = (props) => {
    const {
        selected = [],
        multiple,
        onSelect
    } = props;

    const [isOpen, setOpen] = useState(false),
          [filters, setFilters] = useState<Filters>({}),
          [selectedIds, setSelectedIds] = useState(selected);

    const {
        data: {
            pages = []
        } = {},
        isFetching,
        fetchNextPage,
        hasNextPage
    } = api.profile.paginate.useInfiniteQuery({
        search: filters.search,
        limit: 12,
        orderBy: "createdAt",
        orderDir: "desc"
    }, {
        getNextPageParam: (lastPage) => lastPage.nextCursor
    });

    const handleOpenChange = useCallback((open: boolean) => {
        setOpen(open);
    }, []);

    const handleSave = useCallback(() => {
        if(onSelect) {
            onSelect(selectedIds);
        }

        setOpen(false);
    }, [onSelect, selectedIds]);

    useEffect(() => {
        setSelectedIds(selected);
    }, [selected]);

    return (
        <Dialog
          open={isOpen}
          onOpenChange={handleOpenChange}>
            <DialogTrigger asChild>
                <Button onClick={() => setOpen(true)}>
                    <UserIcon className="size-4" />

                    Select Profile
                </Button>
            </DialogTrigger>

            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Pick profile</DialogTitle>
                    <DialogDescription>Select one or more profiles</DialogDescription>
                </DialogHeader>

                <ResourceListFilters
                  search
                  filters={filters}
                  onChange={setFilters}>
                </ResourceListFilters>

                <ResourcePickerList
                  multiple={multiple}
                  selected={selectedIds}
                  isFetching={isFetching}
                  hasNextPage={hasNextPage}
                  fetchNextPage={fetchNextPage}
                  onChange={setSelectedIds}>
                    {pages.map(({ items }, index) => {
                        return (
                            <div key={index} className="contents">
                                {items.map((profile) => {
                                    return (
                                        <ResourcePickerItem
                                          key={profile.id}
                                          id={profile.id}>
                                            <Avatar className="size-16">
                                                <AvatarImage src={profile.avatar?.url} alt={profile.name} />
                                                <AvatarFallback>{profile.name.charAt(0)}</AvatarFallback>
                                            </Avatar>

                                            <div className="text-center">
                                                <div className="text-sm font-medium leading-none mb-1">{profile.name}</div>
                                                <div className="text-xs text-muted-foreground line-clamp-1">{profile.jobInfo || ""}</div>
                                            </div>
                                        </ResourcePickerItem>
                                    );
                                })}
                            </div>
                        );
                    })}
                </ResourcePickerList>

                <DialogFooter className="pt-4 border-t">
                    <DialogClose asChild>
                        <Button variant="outline">Close</Button>
                    </DialogClose>

                    <Button type="button" onClick={handleSave}>
                        Choose
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};