"use client"
import { loginRepository } from "@/lib/login/data/repository"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
import { useMutation } from "@tanstack/react-query"
import QueryWrapper from "../query-wrapper"
import { useRouter } from "next/navigation"
import logo_2 from "@/images/Telkomcel.png"
import ava from "@/images/ava.png"
import Image from "next/image"
import { useEffect, useState } from "react"

interface Props {
    useLogo: boolean
}

const Content = ({
    useLogo
}: Props) => {
    const [username, setUserName] = useState("");
    const router = useRouter()
    const mutation = useMutation({
        mutationFn: () => loginRepository.logout(),
        onSuccess: () => {
            router.push("/onboard/login")
        },
        onError: () => {
            console.log('error')
        },
    })

    useEffect(() => {
        fetch("/api/cookies")
            .then((res) => res.json())
            .then((data) => setUserName(data.credential.username));
    }, []);

    return (
        <div className="flex justify-between items-center py-5 px-10 bg-white relative w-full">
            {useLogo ? <div className="flex gap-2">
                <div className="max-w-60">
                    <Image src={logo_2} alt="logo_2" priority={false}/>
                </div>
            </div> : <div/>}
            <div>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <div className="flex items-center gap-2 cursor-pointer">
                            <div className="text-end">
                                <h4 className="text-black-80 text-base">Welcome,</h4>
                                <h4 className="text-black-100 uppercase">{username}</h4>
                            </div>
                            <Image src={ava} alt="ava" className="cursor-pointer" />
                        </div>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="w-56 bg-white mr-8 shadow-md rounded-md transition-transform data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut text-black-70 hover:text-black-50">
                        <DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
                            <button className="w-full flex justify-start">
                                Profile
                            </button>
                        </DropdownMenuItem>
                        <DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
                            <button className="w-full flex justify-start" onClick={() => mutation.mutate()}>
                                Logout
                            </button>
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </div>
    )
}

const AppBar = ({useLogo = true}: {useLogo: boolean}) => {
    return (
        <QueryWrapper>
            <Content useLogo={useLogo}/>
        </QueryWrapper>
    )
}

export default AppBar