import React, { useState, useEffect, useCallback } from 'react';
import { FileTextIcon } from 'lucide-react';
import Image from 'next/image';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogPortal,
  DialogFooter,
  DialogClose,
  DialogTrigger
} from '@/components/ui/dialog';
import { DatasetFilters } from "@/components/ui/dataset/dataset-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';
import { cn } from '@/lib/utils';
import { PostType, PostStatusEnum, PostStatusHelpers } from "@/config/enums";

type Filters = {
  search?: string;
};

type Props = {
  multiple?: boolean;
  selected: string[];
  /** @deprecated */
  topic?: PostType;
  type?: PostType;
  onSelect?: (ids: string[]) => void;
};

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

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

  const {
    data: { pages = [] } = {},
    isFetching,
    fetchNextPage,
    hasNextPage
  } = api.posts.paginate.useInfiniteQuery(
    {
      with: ['author'],
      access: 'dashboard',
      search: filters.search,
      type,
      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 ? 'icon' : 'default'}
          variant='outline'
          onClick={() => setOpen(true)}
        >
          <FileTextIcon className='size-4' />

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

      <DialogPortal>
        <DialogContent className='sm:max-w-lg'>
          <DialogHeader>
            <DialogTitle>Pick post</DialogTitle>
            <DialogDescription>Select one or more posts</DialogDescription>
          </DialogHeader>

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

          <ResourcePickerList
            className='max-h-100'
            multiple={multiple}
            selected={selectedIds}
            isFetching={isFetching}
            hasNextPage={hasNextPage}
            fetchNextPage={fetchNextPage}
            onChange={setSelectedIds}
          >
            {pages.map(({ items }, index) => {
              return (
                <div key={index} className='contents'>
                  {items.map((post) => {
                    const Icon = PostStatusHelpers.getIcon(post.status);
                    const isPublished = post.status === PostStatusEnum.PUBLISHED;
                    return (
                      <ResourcePickerItem
                        key={post.id}
                        id={post.id}
                        className={cn(!isPublished && 'opacity-40')}
                      >
                        <span
                          className='mt-2 mr-2 self-end'
                          title={post.status}
                        >
                          <Icon className='size-4 stroke-neutral-300' />
                        </span>
                        <div className='bg-muted relative size-16 flex-shrink-0 overflow-hidden rounded'>
                          {post.preview?.url ? (
                            <Image
                              className='object-cover'
                              fill
                              alt={post.title}
                              src={post.preview.url}
                            />
                          ) : (
                            <div className='flex size-full items-center justify-center'>
                              <FileTextIcon className='text-muted-foreground size-8' />
                            </div>
                          )}
                        </div>

                        <div className='mt-2 px-1 text-center wrap-anywhere'>
                          <div className='mb-1 line-clamp-2 text-sm leading-none font-medium'>
                            {post.title}
                          </div>

                          {post.author && (
                            <div className='text-muted-foreground text-xs'>
                              {post.author.name}
                            </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>
      </DialogPortal>
    </Dialog>
  );
};