"use client";
import React from "react";
import { FormFieldProps } from "react-compose-form";
import { Loader2, X } from "lucide-react";
import { FormFieldContext, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { UserPicker } from "@/components/dashboard/user/user-picker";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/trpc/client";

export type UserFieldProps = FormFieldProps<{
    label?: string;
}>;

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

    const {
        data: user = null
    } = api.user.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-2">
                        {value && (
                            <div className="flex items-center gap-2">
                                {user && (
                                    <React.Fragment>
                                        <Avatar className="size-10">
                                            <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                                        </Avatar>

                                        <span className="text-sm font-medium">{user.name}</span>
                                    </React.Fragment>
                                )}

                                {!user && value && (
                                    <div className="size-10 bg-muted animate-pulse rounded-full">
                                        <Loader2 />
                                    </div>
                                )}

                                {value && (
                                    <Button
                                      variant="ghost"
                                      size="icon"
                                      className="size-8"
                                      type="button"
                                      onClick={() => onChange && onChange(null)}>
                                        <X className="size-4" />
                                    </Button>
                                )}
                            </div>
                        )}

                        <UserPicker
                          selected={value ? [value] : []}
                          onSelect={(ids) => {
                            const [id] = ids;

                            return onChange && onChange(id);
                          }} />
                    </div>
                </FormControl>

                <FormMessage />
            </FormItem>
        </FormFieldContext>
    );
};