"use client";

import {cn} from "@/lib/utils";
import {ClientProfile} from "@/lib/backend/appwrite_types";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {Button} from "@/components/ui/button";
import {MoreVertical} from "lucide-react";
import {Card} from "@/components/ui/card";
import {createNewSession} from "@/lib/backend/api-sessions";
import {Models} from "node-appwrite";
import {useRouter} from "next/navigation";
import {PATIENTS_SESSIONS_URL} from "@/lib/constants";

interface PatientDoctorAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
    doctor: ClientProfile;
    currentUser: Models.User<Models.Preferences>
}

export default function PatientDoctorAvatar({doctor, width, height, className, ...props}: PatientDoctorAvatarProps) {

    const router = useRouter();

    return (
        <Card className={cn("space-y-3 p-2", className)}>
            <div className="overflow-hidden rounded-md">

                <Avatar className="h-auto w-[100px] object-cover transition-all hover:scale-105 aspect-square">
                    <AvatarImage src={doctor.lastName} alt={doctor.firstName}/>
                    <AvatarFallback>{doctor.firstName.at(0)}{doctor.lastName.at(0)}</AvatarFallback>
                </Avatar>
            </div>
            <div className={"flex justify-between"}>
                <div className="space-y-1 text-sm">
                    <h3 className="font-medium leading-none">{doctor.title} {doctor.firstName} {doctor.lastName}</h3>
                    <p className="text-xs text-muted-foreground line-clamp-1">{doctor.qualificationEarned}</p>
                </div>

                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button size="icon" variant="outline" className="h-8 w-8">
                            <MoreVertical className="h-3.5 w-3.5"/>
                            <span className="sr-only">More</span>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={async () => {
                            // initialize new session or resume old session
                            const session = await createNewSession(props.currentUser.$id, doctor.$id);
                            // then redirect to the session details page
                            router.push(`${PATIENTS_SESSIONS_URL}/${session.$id}`)
                        }}>Start Session</DropdownMenuItem>
                        <DropdownMenuItem>Contact</DropdownMenuItem>
                        <DropdownMenuSeparator/>
                        <DropdownMenuItem>View Details</DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>

            </div>
        </Card>
    )
}