import React from "react";
import { FormFieldProps } from "react-compose-form";
import { FileTextIcon, Loader2 } from "lucide-react";
import Image from "next/image";
import { FormFieldContext, FormItem, FormLabel, FormControl } from "@/components/ui/form";
import { FormMessage } from "@/components/form/form-message";
import { PostPicker } from "@/components/dashboard/post/post-picker";
import { api } from "@/lib/trpc/client";
import { TopicsEnum } from "@/config/enums/topic";

export type PostFieldProps = FormFieldProps<{
    label?: string;
    topic?: TopicsEnum
}>;

export const PostField: React.FC<PostFieldProps> = (props) => {
    const {
        topic,
        label,
        name,
        value,
        onChange
    } = props;

    const {
        data: post = null
    } = api.posts.get.useQuery({
        id: value
    }, {
        enabled: !!value
    });

    return (
        <FormFieldContext
          value={{ name: name as string}}>
            <FormItem>
                {label && (
                    <FormLabel>{label}</FormLabel>
                )}

                <FormControl>
                    <div className="flex items-center justify-between gap-4 p-2 border rounded-md">
                        {post && (
                            <div className="flex items-center gap-3 overflow-hidden">
                                <div className="relative size-10 flex-shrink-0 bg-muted rounded overflow-hidden">
                                    {post.preview?.url ? (
                                        <Image
                                          className="object-cover"
                                          fill
                                          alt={post.title}
                                          src={post.preview.url} />
                                    ) : (
                                        <div className="flex items-center justify-center size-full">
                                            <FileTextIcon className="size-6 text-muted-foreground" />
                                        </div>
                                    )}
                                </div>
                                <span className="text-sm font-medium truncate" title={post.title}>
                                    {post.title}
                                </span>
                            </div>
                        )}

                        {!post && value && (
                            <div className="flex items-center gap-2">
                                <Loader2 className="size-4 animate-spin" />
                                <span className="text-sm text-muted-foreground">Loading post...</span>
                            </div>
                        )}

                        {!value && (
                            <span className="text-sm text-muted-foreground italic">No post selected</span>
                        )}

                        <PostPicker
                          selected={value ? [value] : []}
                          type={topic}
                          onSelect={(ids) => {
                            const [id] = ids;
                            return onChange && onChange(id);
                          }} />
                    </div>
                </FormControl>

                {name && (
                    <FormMessage absolute name={name} />
                )}
            </FormItem>
        </FormFieldContext>
    );
};