<script lang="ts">
    import TopRightCrinkle from "../../widgets/TopRightCrinkle.svelte"
    import DynamicRows from "./DynamicRows.svelte"
    import ProductConfigurator from "./ProductConfigurator.svelte"
    import ProductExtendableBoxes from "./ProductExtendableBoxes.svelte"
    import ProductImagePreview from "./ProductImagePreview.svelte"
    import ProductSummary from "./ProductSummary.svelte"
    import RecommendedProducts from "./RecommendedProducts.svelte"
    import ProductRatings from "./widgets/ProductRatings.svelte"

    export let product: BKDFProduct
    let previewImages: Image[] = [],
        selectedVariant: BKDFProductVariant | null = null
</script>

<div class="crinkle">
    <TopRightCrinkle
        edges="{false}"
        brightColor="{false}"
        bigVersion="{true}"
    >
        <svg
            slot="icon"
            width="72"
            height="71"
            viewBox="0 0 72 71"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                id="Vector 3"
                d="M72 0V71L0 0H72Z"
                fill="#0d0c0c"></path>
        </svg>
    </TopRightCrinkle>
</div>
<section id="productPage">
    {#if previewImages?.length}
        <ProductImagePreview
            previewImages="{previewImages}"
            mobileView="{true}"
        />
    {/if}
    <div class="content-wrapper">
        <ProductSummary
            product="{product}"
            productTitleAsHeading="{true}"
        />
        <ProductConfigurator
            product="{product}"
            on:colorChange="{(e) => {
                previewImages = e.detail.previewImages
            }}"
            on:variantChange="{(e) => {
                selectedVariant = e.detail.variant
                previewImages = e.detail.previewImages
            }}"
            mobileFormat="{true}"
        />
        {#if product}
            <DynamicRows bigCommerceProductId="{Number(product.id)}" />
        {/if}
        <ProductExtendableBoxes product="{product}" />
        {#if product}
            <ProductRatings bigCommerceProductId="{Number(product.id)}" />
            <RecommendedProducts product="{product}" />
        {/if}
    </div>
</section>

<style lang="less">
    .crinkle {
        width: calc(100% + 5px);
        height: 0px;
        overflow: visible;
        display: flex;
        justify-content: flex-end;

        top: 84px;
        width: 100%;
        position: -webkit-sticky;
        position: sticky;
        z-index: 1000;
    }
    #productPage {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 3rem;
        align-items: center;
        max-width: 100%;
        overflow: hidden;

        .content-wrapper {
            padding: 0 var(--horizontal-default-margin);
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
            max-width: var(--normal-max-width);
            position: relative;
            margin-bottom: 2.4rem;
        }
    }
</style>
