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

const props = defineProps({
    block: {
        type: Object,
        required: true,
    },
});

const { isActive, target } = useIntersectionActivation();
const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.block?.media));
const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.block?.media?.url));
const bunnyUrl = computed(() => getBunnyEmbedUrl(props.block?.media));
</script>

<template>
    <section ref="target" class="block-video">
        <iframe
            v-if="block.media?.type === 'youtube' && isActive && youtubeUrl"
            :src="youtubeUrl"
            title="Project video block"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        />

        <iframe
            v-else-if="block.media?.type === 'frameio' && isActive && frameIoUrl"
            :src="frameIoUrl"
            title="Project video block"
            loading="lazy"
            allow="autoplay; fullscreen; picture-in-picture"
            allowfullscreen
        />

        <iframe
            v-else-if="block.media?.type === 'bunny' && isActive && bunnyUrl"
            :src="bunnyUrl"
            title="Project video block"
            loading="lazy"
            style="border:0;position:absolute;top:0;height:100%;width:100%;"
            allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
            allowfullscreen
        />

        <video
            v-else-if="block.media?.type === 'video' && isActive && block.media?.url"
            :autoplay="block.media?.autoplay === true"
            :muted="block.media?.muted === true"
            :loop="block.media?.loop === true"
            controls
            playsinline
            preload="metadata"
        >
            <source :src="block.media.url">
        </video>

        <div v-else class="block-video__placeholder">Add a video block URL to render this row.</div>
    </section>
</template>

<style scoped>
.block-video {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
    border-radius: 1.65rem;
    overflow: hidden;
}

iframe,
video {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.block-video__placeholder {
    align-items: center;
    color: var(--project-muted, #6b7280);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
</style>