<script lang="ts" setup>
// import

import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
import useGetProduct from "~/composables/api/product/useGetProduct";
import useGetComments from "~/composables/api/product/useGetComments";

// state

const route = useRoute();

const id = route.params.id as string | undefined;
const page = ref(1);

const { suspense: suspenseProduct, data: product } = useGetProduct(id);
const { suspense: suspenseComments } = useGetComments(id, page);

const selectedVariant = ref<ProductVariant>();

const showChatButton = ref(true);

// type

export type ProductVariantProvideType = {
    selectedVariant: typeof selectedVariant;
    changeSelectedVariant: (value: ProductVariant) => void;
};

// provide / inject

provide("productVariant", {
    selectedVariant,
    changeSelectedVariant: (value: ProductVariant) => (selectedVariant.value = value),
});

// ssr

const productResponse = await suspenseProduct();
const commentsResponse = await suspenseComments();

if (productResponse.isError || commentsResponse.isError) {
    throw createError({
        statusCode: 404,
        statusMessage: `error : product ${id} prefetch error`,
    });
}
</script>

<template>
    <div class="w-full flex flex-col">
        <ProductHero />
        <ProductVideo v-model:showChatButton="showChatButton" />
        <ProductComments />
        <ProductDetails />
        <ProductsGrid
            title="محصولات مشابه"
            :products="product!.related_products"
        />
        <ChatButton :showChatButton="showChatButton" />
    </div>
</template>
