<template>
    <div class="mosaic-viewport" :class="{ active: isActive }">
        <div class="mosaic-container">
            <div
                v-for="cell in content.cells"
                class="mosaic-cell"
                :style="{
                    left: cell.x + 'px',
                    top: cell.y + 'px',
                    width: cell.width + 'px',
                    height: cell.height + 'px',
                }"
                :key="`${viewport.index}-${cell.id}`"
                @click="openNote(cell.content)"
            >
                <div class="gif-placeholder">
                    <div class="gif-info">
                        <span class="gif-id">{{ cell.content.id }}</span>
                        <span class="gif-size"
                            >{{ Math.round(cell.width) }}x{{
                                Math.round(cell.height)
                            }}</span
                        >
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Note modal -->
    <teleport to="#container">
        <div v-if="selectedNote" class="note-modal-backdrop" @click="closeNote">
            <div class="note-modal" @click.stop>
                <button class="note-close" @click="closeNote">×</button>
                <div class="note-content">
                    <p>{{ selectedNote.note }}</p>
                </div>
            </div>
        </div>
    </teleport>
</template>

<script setup>
import { useEventListener } from '@vueuse/core'
import { ref } from 'vue'

const props = defineProps({
    viewport: {
        type: Object,
        required: true,
    },
    index: {
        type: Number,
        required: true,
    },
    content: {
        type: Object,
        required: true,
    },
    isActive: {
        type: Boolean,
        default: false,
    },
})

const selectedNote = ref(null)

const openNote = (cellContent) => {
    if (cellContent.note) {
        selectedNote.value = cellContent
    }
}

const closeNote = () => {
    selectedNote.value = null
}

// Close note on Escape key
const handleKeydown = (event) => {
    if (event.key === 'Escape' && selectedNote.value) {
        closeNote()
    }
}

useEventListener('keydown', handleKeydown)
</script>

<style lang="scss" scoped>
.mosaic-viewport {
    height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;

    .mosaic-container {
        flex: 1;
        position: relative;

        .mosaic-cell {
            position: absolute;
            overflow: hidden;
            border: 1px solid var(--theme-fg);
            cursor: pointer;

            .gif-placeholder {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .gif-info {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.25rem;
            }
        }
    }
}

.note-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .note-modal {
        background: var(--theme-bg);
        width: 50vw;
        padding: 2rem;
    }
}
</style>
