import { component$, Signal, $ } from "@builder.io/qwik";
import axios from "axios";
import { getCookie } from "~/utils/cookie";

export const BuyModal = component$(({ showBuyModal, item, mydotory, itemdotory}: {showBuyModal: Signal<boolean>, item: any, mydotory: Signal<number>, itemdotory: number}) => {
    const handleBuy = $(async() => {
        try {
            const res = await axios.post(`http://localhost:8000/api/store/0?product_name=${item.name}`, {
            }, {
                headers: {
                    Authorization: `Bearer ${getCookie("access_token")}`,
                },
            }) 
            console.log(res.data);
            mydotory.value  -= itemdotory;
            showBuyModal.value = false;
        } catch (error) {
            console.log(error);
        }
    });
    const handleCancel = $(() => {
       showBuyModal.value = false;
    });
    return (
        <div class="flex h-full w-full items-center justify-center bg-black bg-opacity-35">
        <div class="flex flex-col items-center gap-2 rounded-lg bg-white p-10">
            <p> {item.name} </p>
            <p class="font-bold text-2xl"> 정말 구매하시겠습니까?</p>
            
            <p class="text-gray-500">구매 후 잔액: {mydotory.value - itemdotory}</p>
            <div class="flex gap-2">
            <button onclick$={handleBuy} class="bg-diary-color hover:bg-diary-icon-hover rounded-lg p-2">
                구매하기
                <i class="bi bi-cart-plus"></i>
            </button>
            <button onclick$={handleCancel} class="bg-button-color-2 hover:bg-button-color-2-hover rounded-lg p-2">
                취소하기
                <i class="bi bi-x"></i>
            </button>
            </div>
        </div>
        </div>

    );
});