import { $, component$, Signal, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import terminate from "~/assets/images/terminate.svg";
import { useNavigate, useLocation } from "@builder.io/qwik-city";
import { Link } from "@builder.io/qwik-city";
import { deleteCookie, getCookie } from "~/utils/cookie";
import axios from "axios";

export default component$(({ showAddFriends }: { showAddFriends: Signal<boolean> }) => {
    const navigate = useNavigate();
    const location = useLocation();      
    const handleLogout = $(() => {
        console.log("logout");
        deleteCookie("access_token");
        navigate("/auth");
    });
    const myInfo = useSignal<Friend>({
        id: 0,
        username: "",
        email: "",
        created_at: "",
        profile_image_path: "",
        is_active: false
    });
    const visitedUser = useSignal<Friend>({
        id: 0,
        username: "",
        email: "",
        created_at: "",
        profile_image_path: "",
        is_active: false
    });
    useVisibleTask$(() => {
        try {
            axios.get('http://localhost:8000/api/user/me', {
                headers: {
                    Authorization: `Bearer ${getCookie("access_token")}`,
                },
            }).then((res) => {
                myInfo.value = res.data;
                console.log(myInfo.value);
            })
            .catch((error) => {
                console.log(error);
            })
            axios.get(`http://localhost:8000/api/user/profile/${location.params.username}`, {
                headers: {
                    Authorization: `Bearer ${getCookie("access_token")}`,
                },
            }).then((res) => {
                console.log(res.data);
                visitedUser.value = res.data;
            })
            .catch((error) => {
                console.log(error);
            })
        } catch (error) {
            console.log(error);
        }
    })
    const nickname = location.params.username;
    return (
        <header class="sticky xl:flex hidden  left-0 top-0 min-h-screen w-64 p-4  bg-custom-gradient flex-col pt-16 overflow-y-auto">
            {visitedUser.value.id !== myInfo.value.id &&
                <a href={`/${myInfo.value.username}/`} class="text-default w-full text-center underline mb-2">
                    내 페이지로 돌아가기
                </a>
            }
            <div class="flex flex-col items-center gap-2">
                <div class="w-48 h-48 hidden md:block">
                <input type="image" src={`http://localhost:8000/${visitedUser.value.profile_image_path}`}  class=" object-cover w-full h-full bg-white rounded-full" alt="profile" />
                </div>
                <p class="text-gray-500 text-sm max-w-64 w-full bg-white pl-2 p-1 rounded-md">{nickname}</p>
            </div>
            <h1 class="mt-8 text-2xl font-bold border-t-2 border-black pt-2 pb-6 hidden sm:block">목록</h1>
            <nav class="">
                <ul class="space-y-2 text-xl">
                    <li >
                        <Link href={`/${nickname}/`} class="flex items-center p-3 rounded-lg hover:bg-white hover:text-black transition-colors">
                            <i class="bi bi-house-door"></i>
                            <span class="ml-2 hidden sm:block">홈</span>
                        </Link>
                    </li>
                    <li>
                        <Link href={`/${nickname}/diary`} class="flex items-center p-3 rounded-lg hover:bg-white hover:text-black transition-colors">
                            <i class="bi bi-journal-bookmark"></i>
                            <span class="ml-2 hidden sm:block">다이어리</span>
                        </Link>
                    </li>
                    <li>
                        <Link href={`/${nickname}/guestbook`} class="flex items-center p-3 rounded-lg hover:bg-white hover:text-black transition-colors">
                            <i class="bi bi-journals"></i>
                            <span class="ml-2 hidden sm:block">방명록</span>
                        </Link>
                    </li>
                    <li onclick$={() => {showAddFriends.value = true; console.log(showAddFriends.value)}} class={myInfo.value.username === visitedUser.value.username ? "" : "hidden"}>
                          <div  class="flex hover:cursor-pointer items-center p-3 rounded-lg hover:bg-white hover:text-black transition-colors">
                            <i class="bi bi-person-add"></i>
                            <span class="ml-2 hidden sm:block">친구 추가</span>
                        </div>
                    </li>
                    <li class={myInfo.value.username === visitedUser.value.username ? "" : "hidden"}>
                        <Link href={`/${nickname}/store`} class="flex items-center p-3 rounded-lg hover:bg-white hover:text-black transition-colors">
                            <i class="bi bi-bag"></i>
                            <span class="ml-2 hidden sm:block">상점</span>
                        </Link>
                    </li>
                </ul>
            </nav>
            <div class="mt-auto flex flex-row justify-center items-center gap-2">
                <p class="text-sm text-center text-black border-b-2 border-black">로그아웃</p>
                <button class="h-4 w-4" onClick$={handleLogout}><img src={terminate} width={12} height={12} alt="terminate" /></button>
            </div>
        </header>
    );
});