"use client";
import React, { useCallback } from "react";
import { useFieldArray, useFormContext } from "react-hook-form";
import { useFormGroupName } from "react-compose-form";
import { Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { UserPicker } from "@/components/dashboard/user/user-picker";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { MemberRole } from "@/server/modules/organization/types/member-role.enum";
import { api } from "@/lib/trpc/client";

type MemberData = {
    userId: string;
    role: MemberRole;
    user?: {
        name: string;
    };
};

type MemberCollectionProps = {
    name: string;
};

export const OrganizationMemberCollection: React.FC<MemberCollectionProps> = (props) => {
    const { name } = props;
    const fullName = useFormGroupName(name);
    const { control, register } = useFormContext();

    const {
        fields,
        append,
        remove,
        update
    } = useFieldArray<{
        [key: typeof fullName]: MemberData[];
    }>({
        control,
        name: fullName
    });

    const handleAddMember = useCallback((userIds: string[]) => {
        userIds.forEach((userId) => {
            if(!fields.some(f => f.userId === userId)) {
                append({
                    userId,
                    role: MemberRole.MEMBER
                });
            }
        });
    }, [append, fields]);

    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between">
                <h3 className="text-lg font-medium">Members</h3>

                <UserPicker
                  multiple
                  selected={fields.map(f => f.userId)}
                  onSelect={handleAddMember} />
            </div>

            <div className="space-y-2">
                {fields.map((field, index) => (
                    <MemberItem
                      key={field.id}
                      userId={field.userId}
                      role={field.role}
                      onRoleChange={(role) => update(index, { ...field, role })}
                      onRemove={() => remove(index)} />
                ))}

                {fields.length === 0 && (
                    <div className="text-sm text-muted-foreground italic py-2">
                        No members added yet.
                    </div>
                )}
            </div>

            {fields.map((field, index) => (
                <React.Fragment key={field.id}>
                    <input type="hidden" {...register(`${fullName}.${index}.userId`)} />
                    <input type="hidden" {...register(`${fullName}.${index}.role`)} />
                </React.Fragment>
            ))}
        </div>
    );
};

const MemberItem: React.FC<{
    userId: string;
    role: string;
    onRoleChange: (role: MemberRole) => void;
    onRemove: () => void;
}> = ({ userId, role, onRoleChange, onRemove }) => {
    const {
        data: user
    } = api.user.get.useQuery({
        id: userId
    });

    return (
        <div className="flex items-center justify-between p-2 border rounded-md bg-card">
            <div className="flex items-center gap-3">
                <Avatar className="h-8 w-8">
                    <AvatarFallback>{user?.name?.charAt(0) || "?"}</AvatarFallback>
                </Avatar>

                <div>
                    <div className="text-sm font-medium">{user?.name || "Loading..."}</div>
                    <div className="text-xs text-muted-foreground">{user?.email}</div>
                </div>
            </div>

            <div className="flex items-center gap-2">
                <Select value={role} onValueChange={onRoleChange}>
                    <SelectTrigger className="h-8 w-[120px]">
                        <SelectValue />
                    </SelectTrigger>

                    <SelectContent>
                        {Object.values(MemberRole).map((role) => {
                            return (
                                <SelectItem key={role} value={role}>{role}</SelectItem>
                            );
                        })}
                    </SelectContent>
                </Select>

                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 text-destructive"
                  onClick={onRemove}>
                    <Trash2 className="h-4 w-4" />
                </Button>
            </div>
        </div>
    );
};