<script lang="ts">
    export let col: Column
    export let siteId: string
    import { register } from "swiper/element/bundle"
    import { apiBaseURL } from "../../../config"
    import { onMount } from "svelte"

    register(false)
    let swiper: any
    onMount(async () => {
        if (swiper) {
            const response = await fetch("/dist/index.css")
            const cssText = await response.text()

            const params = {
                injectStyles: [cssText],
            }
            if (swiper) {
                Object.assign(swiper, params)
                swiper.initialize()
            }
        }
    })
</script>

<main id="products">
    <swiper-container
        bind:this="{swiper}"
        slides-per-view="3"
        loop="{true}"
        direction="horizontal"
        effect="coverflow"
        init="{false}"
        speed="400"
        class="relative"
        grab-cursor="{true}"
        scrollbar-hide="false"
        on:focus
        on:blur
        autoplay="{{
            delay: 1000, // 5000ms = 5s
            pauseOnMouseEnter: true,
        }}"
    >
        {#each col.productPreview as product}
            <swiper-slide class="relative" id="product">
                <div class="product">
                    <div class="img-container">
                        <img
                            src="{`${apiBaseURL}content/${siteId}/${product.image?.src}?filter=${
                                 typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                            }`}"
                            alt="img"
                        />
                        <div class="price-container">
                            {product?.price} €
                        </div>
                    </div>
                    <div class="title-container">
                        {@html product?.title}
                    </div>

                    <div class="description-container">
                        {@html product?.text}
                    </div>
                </div>
            </swiper-slide>
        {/each}
    </swiper-container>
</main>

<style lang="less" global>
    @import "../../assets/css/variables.less";
    @import "swiper/swiper-bundle.min.css";
    @import "swiper/modules/effect-fade/effect-fade";
    @import "swiper/modules/navigation/navigation";
    @import "swiper/modules/pagination/pagination";
    @import "../../assets/css/productSwiper.less";
    #products {
        flex: 1;
        display: flex;
        justify-content: center;
        max-width: @body-small-maxwidth;

        .product {
            margin: 0px 35px 40px 35px;
            .img-container {
                flex: 1;
                height: 270px;
                background-color: var(--background-color);
                @media @tablet {
                    height: 65vw;
                }
                @media @desktop {
                    height: 270px;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    padding: 1rem 0px;
                }
                position: relative;
                .price-container {
                    position: absolute;
                    bottom: 1rem;
                    right: 0px;
                    font-weight: bold;
                    background-color: var(--background-color);
                    padding: 9px;
                }
            }
            .title-container {
                font-weight: 700;
                padding-bottom: 1.2rem;
            }
        }
    }
</style>
