<script setup>
import { computed } from 'vue';
import { useIntersectionActivation } from '../../composables/useIntersectionActivation';
import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../../schema/projectSchema';

const props = defineProps({
    slotData: {
        type: Object,
        required: true,
    },
    activeLang: {
        type: String,
        default: '',
    },
});

const { isActive, target } = useIntersectionActivation();

const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.slotData?.media));
const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.slotData?.media?.url));
const bunnyUrl = computed(() => getBunnyEmbedUrl(props.slotData?.media));

const displayContent = computed(() => {
    const c = props.slotData?.content;
    if (typeof c === 'string') return c;
    if (c && typeof c === 'object') {
        return c[props.activeLang] || c[Object.keys(c)[0]] || '';
    }
    return '';
});

const resolveAlt = (alt, fallback) => {
    if (!alt) return fallback;
    if (typeof alt === 'string') return alt || fallback;
    return alt[props.activeLang] || alt[Object.keys(alt)[0]] || fallback;
};
</script>

<template>
    <!-- TEXT -->
    <div v-if="slotData.type === 'text'" class="project-text-block" v-html="displayContent"></div>

    <!-- IMAGE -->
    <img
        v-else-if="slotData.type === 'image' && slotData.image?.url"
        :src="slotData.image.url"
        :alt="resolveAlt(slotData.image?.alt, '')"
        loading="lazy"
    >

    <!-- VIDEO -->
    <div v-else-if="slotData.type === 'video'" ref="target" class="project-video-wrap">
        <iframe
            v-if="slotData.media?.type === 'youtube' && isActive && youtubeUrl"
            :src="youtubeUrl"
            title="Project video"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        />
        <iframe
            v-else-if="slotData.media?.type === 'frameio' && isActive && frameIoUrl"
            :src="frameIoUrl"
            title="Project video"
            loading="lazy"
            allow="autoplay; fullscreen; picture-in-picture"
            allowfullscreen
        />
        <div v-else-if="slotData.media?.type === 'bunny' && bunnyUrl" class="project-video-wrap__bunny">
            <iframe
                v-if="isActive"
                :src="bunnyUrl"
                loading="lazy"
                allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
                allowfullscreen
            />
        </div>
        <video
            v-else-if="slotData.media?.type === 'video' && isActive && slotData.media?.url"
            class="project-video"
            :autoplay="slotData.media?.autoplay === true"
            :muted="slotData.media?.muted === true"
            :loop="slotData.media?.loop === true"
            playsinline
        >
            <source :src="slotData.media.url" type="video/mp4">
        </video>
    </div>
</template>

<style scoped>
img {
    display: block;
    height: auto;
    width: 100%;
}

.project-text-block {
    color: #f5f5f5;
    line-height: 1.6;
    padding: 1rem 0;
}

.project-video-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.project-video-wrap iframe,
.project-video-wrap video {
    border: 0;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.project-video-wrap__bunny {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.project-video-wrap__bunny iframe {
    height: 100%;
    width: 100%;
}

video.project-video {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
</style>
