"use client"

import { Icons } from "@/components/icons"
import { Button, buttonVariants } from "@/components/ui/button"
import {
    Sheet,
    SheetClose,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from "@/components/ui/sheet"
import { cn } from "@/lib/utils"
import { User } from "next-auth"
import { signOut } from "next-auth/react"
import Link from "next/link"
import { GameUnityLogo } from "./logo"
import { ModeToggle } from "./mode-toggle"
import { NavPromo } from "./nav-promo"
import { UserAvatar } from "./user-avatar"

export const MobileSheet = ({ user }: { user: User | undefined }) => {
    return (
        <Sheet>
            <SheetTrigger asChild>
                <div className={cn(buttonVariants({ variant: "ghost", size: "logo" }), "cursor-pointer")}>
                    {user ?
                        <UserAvatar
                            user={{ username: user.username ?? null, image: user.image ?? null }}
                            className="h-8 w-8"
                        />
                        :
                        <Icons.menu />}
                </div>
            </SheetTrigger>
            <SheetContent>
                {!user ?
                    <div className="flex flex-col justify-center items-center h-full space-y-6">
                        <GameUnityLogo />
                        <NavPromo />
                    </div>
                    :
                    <div className="flex flex-col justify-center items-center h-full">
                        <SheetClose asChild>
                            <Link href={`${user.username}`} className="flex flex-col justify-center items-center">
                                <UserAvatar
                                    user={{ username: user.username ?? null, image: user.image ?? null }}
                                    className="h-16 w-16"
                                />
                                <SheetHeader className="pt-6">
                                    <SheetTitle>{user.name}</SheetTitle>
                                    <SheetDescription className="text-sky-500 text-center">
                                        @{user.username}
                                    </SheetDescription>
                                </SheetHeader>
                            </Link>
                        </SheetClose>

                        <div className="flex flex-col items-center space-y-6 pt-12">
                            <SheetClose asChild>
                                <Link href="/settings" className={cn(buttonVariants({ variant: "outline", size: "lg" }), "w-full")}>
                                    Settings
                                </Link>
                            </SheetClose>

                            <Button variant="outline" size="lg"
                                onClick={(event) => {
                                    event.preventDefault()
                                    signOut({
                                        callbackUrl: `${window.location.origin}/login`,
                                    })
                                }}
                            >
                                Sign out
                            </Button>

                            <SheetClose asChild>
                                <Link href="/help" className="text-sm text-muted-foreground">Help / FAQ</Link>
                            </SheetClose>

                            <ModeToggle />
                        </div>
                    </div>
                }
            </SheetContent>
        </Sheet>
    )
}