<template>
	<main v-if="data" class="drop theme-dark layout-grid">
        <panel
            :drop="data"
            :index="dropIndex"
            :previousActive="dropIndex > 0"
            :nextActive="dropIndex < props.manifest.length - 1"
            :key="dropIndex"
            @previous="onPrevious"
            @next="onNext"
        />

        <div class="drop-wrap">
            <iframe :src="data.src" />
        </div>
	</main>
</template>

<script setup>
import Panel from '@/components/Panel.vue'
import { computed, onMounted, ref, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const props = defineProps({
    manifest: Array,
})

const router = useRouter()
const route = useRoute()
const name = route.params.id

const data = ref()

onMounted(async () => {
    try {
        const meta = await fetch(`/drops/${name}/meta.json`).then((r) => r.json())
        data.value = {
            ...meta,
            src: `/drops/${name}/index.html`,
        }
    } catch (e) {
        data.value = {
            name,
            src: `/drops/${name}/index.html`,
        }
    }
})

const dropIndex = computed(() => props.manifest.findIndex((drop) => drop === name))
const prevDrop = computed(() => {
    if (dropIndex.value === 0) return null
    return props.manifest[dropIndex.value - 1]
})
const nextDrop = computed(() => {
    if (dropIndex.value === props.manifest.length - 1) return null
    return props.manifest[dropIndex.value + 1]
})

const onPrevious = () => {
    router.push(`/${prevDrop.value}`)
}
const onNext = () => {
    router.push(`/${nextDrop.value}`)
}
</script>

<style lang="scss">
main.drop {
    background: var(--theme-layout);
    color: var(--theme-fg);
    height: 100vh;
    padding-top: rs(20px);
    padding-bottom: rs(20px);

    .panel {
        grid-column: span 4;
    }
    .drop-wrap {
        grid-column: 5 / -1;
        border-radius: rs(10px);
        border: 1px solid var(--theme-grey);
        overflow: hidden;
        position: relative;

        iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    }
}
</style>
