<script lang="ts">
    import { onMount } from "svelte"
    import { register } from "swiper/element/bundle"
    import { apiBaseURL } from "../../../config"
    import { mediaLibrary } from "../../store"
    export let images: string[]

    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 = images[0]
</script>

{#if images.length > 1}
    <div class="flex">
        <swiper-container
            bind:this="{swiper}"
            slides-per-view="1"
            loop="{true}"
            direction="horizontal"
            effect="slide"
            autoplay-delay="2500"
            mousewheel="{true}"
            navigation="{true}"
            init="{false}"
            speed="600"
            class="relative"
        >
            {#each images as image, i (i)}
                <swiper-slide class="relative">
                    <div class="image-container">
                        <img
                            src="{`${apiBaseURL}medialib/${image}/${$mediaLibrary?.[image]?.file?.src}?filter=${
                                window.innerWidth > 500 ? 'xl' : 'm'
                            }`}"
                            alt="Bild"
                        />
                    </div>
                </swiper-slide>
            {/each}
        </swiper-container>
    </div>
{:else if image}
    <div class="image-container single flex">
        <img
            src="{`${apiBaseURL}medialib/${image}/${$mediaLibrary?.[image]?.file?.src}?filter=${
                window.innerWidth > 500 ? 'xl' : 'm'
            }`}"
            alt="Bild"
        />
    </div>
{/if}

<style lang="less">
    @import "../../assets/css/variables.less";

    swiper-container {
        height: auto;
        width: 100%;
    }
    swiper-slide {
        width: 100% !important;
    }
    .flex {
        flex: 2 !important;
    }

    .image-container {
        max-width: 100%;
        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;
        }
    }
</style>
