<script lang="ts">
    import { onMount } from "svelte"
    import { register } from "swiper/element/bundle"
    import { apiBaseURL } from "../../../config"

    export let siteId: string
    export let siteImages: ImageSlider[]

    register(false)
    let swiper: any

    onMount(async () => {
        if (swiper !== undefined) {
            const response = await fetch("/dist/index.css")
            const cssText = await response.text()

            const params = {
                injectStyles: [cssText],
            }

            Object.assign(swiper, params)
            swiper.initialize()
        }
    })
    let image = siteImages[0]
</script>

{#if siteImages.length > 1}
    <div class="flex images" id="image">
        <swiper-container
            bind:this="{swiper}"
            slides-per-view="1"
            loop="{true}"
            direction="horizontal"
            effect="slide"
            autoplay-delay="2500"
            mousewheel="{true}"
            init="{false}"
            speed="600"
            class="relative"
            autoplay="{{
                delay: 1000, // 5000ms = 5s
                pauseOnMouseEnter: true,
            }}"
            grab-cursor="{true}"
            pagination="{true}"
        >
            {#each siteImages as image, i (i)}
                <swiper-slide class="relative" id="imageSlide">
                    <div class="image-container">
                        {#if typeof window !== "undefined"}
                            <img
                                src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
                                    typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                                }`}"
                                alt="Bild"
                            />{/if}
                    </div>
                </swiper-slide>
            {/each}
        </swiper-container>
    </div>
{:else if image}
    <div class="image-container single flex">
        <img
            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
                typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
            }`}"
            alt="Bild"
        />
    </div>
{/if}

<style lang="less" global>
    @import "swiper/swiper.less";
    @import "swiper/modules/effect-fade/effect-fade.less";
    @import "swiper/modules/navigation/navigation.less";
    @import "swiper/modules/pagination/pagination.less";
    @import "../../assets/css/variables.less";
    @import "../../assets/css/swiperStyles.less";

    #image {
        swiper-container {
            height: auto;
            width: 100%;
            max-width: 100vw;
            padding: 0px !important;
        }
    }

    .flex {
        flex: 2 !important;
    }

    .image-container {
        width: 100%;
        overflow: hidden;
        max-width: @body-maxwidth;
        &:hover img {
            transform: scale(1.05);
            transform-origin: center;
        }
        img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    }

    .single {
        max-width: @body-small-maxwidth;
    }
    #imageSlide {
        & {
            width: 100% !important;
        }
    }
    .swiper-pagination {
        & > span {
            background-color: var(--opposite-bg-color);
        }
    }
</style>
