<script lang="ts" setup>
    import { computed, ref } from 'vue';
    import UIImageWithLoader from '@/UI-kit/components/UI/image-with-loader/UIImageWithLoader.vue';
    import UISwiper from '@/UI-kit/components/UI/swiper/UISwiper.vue';
    import UIBlockImageGalleryFullscreen from '@/UI-blocks/components/ImageGallery/UIBlockImageGalleryFullscreen.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';

    const props = withDefaults(
        defineProps<{
            list: UIBlockImageGallerySlide[];
            /** Ширина блока галереи (CSS), например `100%` или `320px` */
            width?: string;
            /** Высота слайда (CSS). Если задана — `aspectRatio` не применяется к высоте */
            slideHeight?: string;
            /** Соотношение сторон слайда, например `4 / 3` */
            aspectRatio?: string;
            spaceBetween?: number;
            pagination?: boolean;
            /** Проброс в `UISwiper`: `full` — слайд на всю ширину, `default` — авто-ширина */
            variant?: 'default' | 'full';
            loaderBorderColor?: Nullable<UIColorValues> | string;
            fullscreenCloseAriaLabel?: string;
        }>(),
        {
            list: () => [],
            width: '100%',
            slideHeight: '',
            aspectRatio: '4 / 3',
            spaceBetween: 0,
            pagination: true,
            variant: 'full',
            loaderBorderColor: UIColor[UIColorName.Blue500],
            fullscreenCloseAriaLabel: 'Close',
        },
    );

    const rootStyle = computed(() => ({
        width: props.width,
        '--uib-gallery-slide-height': props.slideHeight || 'auto',
        '--uib-gallery-aspect-ratio': props.aspectRatio,
    }));

    const fullscreenOpen = ref(false);
    const fullscreenInitialIndex = ref(0);

    const openFullscreen = (index: number): void => {
        fullscreenInitialIndex.value = index;
        fullscreenOpen.value = true;
    };

    const closeFullscreen = (): void => {
        fullscreenOpen.value = false;
    };
</script>

<template>
    <section v-if="list.length > 0" class="ui-block-image-gallery" :style="rootStyle">
        <UISwiper
            class="ui-block-image-gallery__swiper"
            :variant="variant"
            :list="list"
            :space-between="spaceBetween"
            :pagination="pagination && list.length > 1"
        >
            <template #default="{ item, index }">
                <button
                    type="button"
                    class="ui-block-image-gallery__slide-btn"
                    :aria-label="(item as UIBlockImageGallerySlide).alt"
                    @click="openFullscreen(index)"
                >
                    <UIImageWithLoader
                        class="ui-block-image-gallery__img"
                        :src="(item as UIBlockImageGallerySlide).src"
                        :alt="(item as UIBlockImageGallerySlide).alt ?? ''"
                        :loading="index === 0 ? 'eager' : 'lazy'"
                        object-fit="cover"
                        :loader-border-color="loaderBorderColor"
                    />
                </button>
            </template>
        </UISwiper>

        <Teleport to="body">
            <UIBlockImageGalleryFullscreen
                v-if="fullscreenOpen"
                :slides="list"
                :initial-index="fullscreenInitialIndex"
                :close-aria-label="fullscreenCloseAriaLabel"
                :loader-border-color="loaderBorderColor"
                @close="closeFullscreen"
            />
        </Teleport>
    </section>
</template>

<style scoped lang="scss">
    .ui-block-image-gallery {
        width: var(--uib-gallery-width, 100%);
    }

    .ui-block-image-gallery__swiper {
        width: 100%;
    }

    .ui-block-image-gallery__slide-btn {
        display: block;
        width: 100%;
        height: var(--uib-gallery-slide-height, auto);
        padding: 0;
        background: var(--gray-100);
        border: none;
        aspect-ratio: var(--uib-gallery-aspect-ratio, 4 / 3);
        overflow: hidden;
        cursor: pointer;
    }

    .ui-block-image-gallery__img {
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
</style>
