<script lang="ts">
    import { onMount } from "svelte"
    import { register } from "swiper/element/bundle"
    import MedialibImage from "../widgets/MedialibImage.svelte"
    export let images: string[]
    export let imageHoverEffect: boolean
    export let forceFullHeight: boolean
    register(false)
    let swiper: any
    onMount(async () => {
        if (swiper !== undefined) {
            const response = await fetch("/dist/index.css"),
                cssText = await response.text(),
                params ={
                    injectStyles: [cssText],
                }
            Object.assign(swiper, params)
            swiper.initialize()
        }
    })
</script>

{#if images.length > 1}
    <div class="default-swiper">
        <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 (image)}
                <swiper-slide class="relative">
                    <div
                        class:imageHoverEffect={imageHoverEffect}
                        class="image-container"
                    >
                        <MedialibImage
                            id={image}
                            filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
                        />
                    </div>
                </swiper-slide>
            {/each}
        </swiper-container>
    </div>
{:else if images[0]}
    <div
        class="image-container single flex"
        class:forceFullHeight={forceFullHeight}
        class:imageHoverEffect={imageHoverEffect}
    >
        <MedialibImage
            id={images[0]}
            filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
        />
    </div>
{/if}

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

    :global .default-swiper {
        flex: 2 !important;
        .swiper-button-prev,
        .swiper-button-next {
            transform-origin: left;
            color: #333;
            transform: scale(0.3);
            background-color: rgba(255, 255, 255, 0.6);
            top: 50%;
            padding: 10px;
            height: 70px;
            width: 70px;
            border-radius: 50px;
        }
        .swiper-button-prev {
            left: 6%;
        }
        .swiper-button-next {
            right: 6%;
            transform-origin: right;
        }

        swiper-container {
            width: 100%;
            swiper-slide {
                width: 100% !important;
            }
        }
    }

    .image-container {
        max-width: 100%;
        width: 100%;
        height: 100%;

        overflow: visible;
        max-width: @body-maxwidth;
        display: flex;
        align-items: flex-end;
        :global &.imageHoverEffect:hover img {
            transform: scale(1.05);
            transform-origin: center;
        }
        :global & > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        :global &.forceFullHeight img {
            width: unset;
        }
        @media @mobile {
            :global & > img {
                height: 90% !important;
            }
        }
    }
</style>
