'use client';
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 UserPicker: 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.user.paginate.useInfiniteQuery(
    {
      search: filters.search,
      limit: 12,
      orderBy: 'createdAt',
      orderDir: 'desc'
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor
    }
  );

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

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

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

  return (
    <Dialog open={isOpen} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          size={selected.length === 0 || multiple ? 'default' : 'icon'}
          variant='outline'
          onClick={() => setOpen(true)}
        >
          <UserIcon className='size-4' />

          {(selected.length === 0 || multiple) && (
            <React.Fragment>Select User</React.Fragment>
          )}
        </Button>
      </DialogTrigger>

      <DialogContent>
        <DialogHeader>
          <DialogTitle>Pick user</DialogTitle>
          <DialogDescription>Select one or more users</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((user) => {
                  return (
                    <ResourcePickerItem key={user.id} id={user.id}>
                      <Avatar className='size-16'>
                        <AvatarImage
                          src={user.image || undefined}
                          alt={user.name}
                        />
                        <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                      </Avatar>

                      <div className='px-1 text-center wrap-anywhere'>
                        <div className='mb-1 text-sm leading-none font-medium'>
                          {user.name}
                        </div>
                        <div className='text-muted-foreground line-clamp-1 text-xs'>
                          {user.email}
                        </div>
                      </div>
                    </ResourcePickerItem>
                  );
                })}
              </div>
            );
          })}
        </ResourcePickerList>

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

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