import { Link, RequestHandler } from "@builder.io/qwik-city";
// import { onRequest } from "../layout";
import { component$, Slot } from "@builder.io/qwik";
import { DocumentHead } from "@builder.io/qwik-city";
import { useLocation } from "@builder.io/qwik-city";
import axios from "axios";
import { routeLoader$ } from "@builder.io/qwik-city";
// import { DotoryContext } from "~/utils/context";
export const onGet: RequestHandler = async ({ cookie, params, sharedMap}) => { 

    console.log(params.username + "의 상점 페이지로 들어옴");

    try {
        const res = await axios.get(`http://localhost:8000/api/store`, {
            headers: {
                Authorization: `Bearer ${cookie.get("access_token")?.value}`,
            },
        });
        sharedMap.set("dotory", res.data.dotory ?? 0);
        console.log(res.data ?? "no data");
        } catch (error) {
        console.log(error);
        sharedMap.set("dotory", 0);
    }
}
export const useDotory = routeLoader$(({sharedMap}) => {
    return sharedMap.get("dotory") as number;
});
export default component$(() => {
    const location = useLocation();
    const dotory = useDotory();
    console.log(location.url.pathname);
    console.log("/"+location.params.username+"/store/");
    return (
        <div class="w-full h-full flex flex-col">
            <div class="flex justify-center flex-col gap-4 p-2 items-center w-full">
            <div class="flex items-center justify-between w-full bg-diary-color rounded-lg p-2">
                <div class="flex md:flex-row flex-col gap-2">
                    <Link href={`/${location.params.username}/store`} class={`${location.url.pathname === `/${location.params.username}/store/` ? "bg-white" : "bg-button-color-3"}  text-gray-800 px-4 py-2 rounded-lg font-medium`}>상점 <i class="bi bi-shop"></i></Link>
                    <Link href={`/${location.params.username}/room`} class={`${location.url.pathname === `/${location.params.username}/room/` ? "bg-white" : "bg-button-color-3"}  text-gray-800 px-4 py-2 rounded-lg font-medium`}>방</Link>
                </div>
                <div class="flex md:flex-row flex-col">
                    <div class="ml-auto bg-[#CC8A6A] text-default px-4 py-2 rounded-lg font-medium">도토리: {dotory.value}</div>
                </div>
            </div> 
            </div> 
            <Slot />
        </div>
    );
});

export const head: DocumentHead = {
    title: "Store",
    meta: [
        {
            name: "description",
            content: "Store page description",
        },
    ],
};

