<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";

// type

export type ProductVariantProvideType = {
    selectedVariant: Ref<ProductVariant>,
    changeSelectedVariant: (value: ProductVariant) => void
}

// state

const route = useRoute();

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

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

const selectedVariant = ref<ProductVariant>();

// 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 />
        <ProductComments />
        <ProductDetails />
        <!--        <ProductsSlider title="محصولات مشابه" />-->
        <ChatButton />
    </div>
</template>
