<script lang="ts" setup>
    import { onMounted, onUnmounted } from 'vue';
    import CloseBtn from '@/UI-kit/components/common/CloseBtn.vue';
    import UIImageWithLoader from '@/UI-kit/components/UI/image-with-loader/UIImageWithLoader.vue';
    import UISwiper from '@/UI-kit/components/UI/swiper/UISwiper.vue';
    import { UIColor } from '@/UI-kit/constants';
    import { UIColorName, type Nullable, type UIColorValues } from '@/UI-kit/types';
    import type { UIBlockImageGallerySlide } from '@/UI-blocks/components/ImageGallery/types';

    withDefaults(
        defineProps<{
            slides: UIBlockImageGallerySlide[];
            initialIndex?: number;
            closeAriaLabel?: string;
            loaderBorderColor?: Nullable<UIColorValues> | string;
        }>(),
        {
            initialIndex: 0,
            closeAriaLabel: 'Close',
            loaderBorderColor: UIColor[UIColorName.Blue500],
        },
    );

    const emit = defineEmits<{
        close: [];
    }>();

    const onKeydown = (event: KeyboardEvent): void => {
        if (event.key === 'Escape') {
            emit('close');
        }
    };

    onMounted(() => {
        document.body.style.overflow = 'hidden';
        window.addEventListener('keydown', onKeydown);
    });

    onUnmounted(() => {
        document.body.style.overflow = '';
        window.removeEventListener('keydown', onKeydown);
    });
</script>

<template>
    <div
        class="ui-block-image-gallery-fullscreen"
        role="dialog"
        aria-modal="true"
        :aria-label="closeAriaLabel"
        @click.self="emit('close')"
    >
        <CloseBtn class="closeButton" :aria-label="closeAriaLabel" @click="emit('close')" />

        <div class="ui-block-image-gallery-fullscreen__swiper-wrap">
            <UISwiper
                class="ui-block-image-gallery-fullscreen__swiper"
                variant="full"
                :auto-height="false"
                :list="slides"
                :initial-slide="initialIndex"
                pagination
            >
                <template #default="{ item, index }">
                    <div class="ui-block-image-gallery-fullscreen__slide">
                        <UIImageWithLoader
                            class="ui-block-image-gallery-fullscreen__img"
                            :src="(item as UIBlockImageGallerySlide).src"
                            :alt="(item as UIBlockImageGallerySlide).alt ?? ''"
                            :loading="index === 0 ? 'eager' : 'lazy'"
                            object-fit="contain"
                            :loader-border-color="loaderBorderColor"
                        />
                    </div>
                </template>
            </UISwiper>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .ui-block-image-gallery-fullscreen {
        position: fixed;
        z-index: 10050;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
        background: rgb(0 0 0 / 92%);
        flex-direction: column;
        box-sizing: border-box;
        inset: 0;
    }

    .closeButton {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
    }

    .ui-block-image-gallery-fullscreen__swiper-wrap {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-height: 0;
    }

    .ui-block-image-gallery-fullscreen__swiper {
        width: 100%;
        height: 100%;
    }

    .ui-block-image-gallery-fullscreen__slide {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .ui-block-image-gallery-fullscreen__img {
        width: 100%;
        height: 100%;
        max-height: 100%;
    }

    .ui-block-image-gallery-fullscreen__swiper:deep(.ui-swiper__container),
    .ui-block-image-gallery-fullscreen__swiper:deep(.swiper) {
        height: 100%;
    }

    .ui-block-image-gallery-fullscreen__swiper:deep(.swiper-wrapper) {
        align-items: center;
        height: 100% !important;
    }

    .ui-block-image-gallery-fullscreen__swiper:deep(.swiper-slide) {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
</style>
