<template>
    <div class="page-container" :style="{ transform: `scale(${zoom})` }">
        <div v-if="!pageData" class="error">Aucune donnée d'image disponible</div>
        <div v-else-if="!pageData.base64Content" class="error">Contenu de l'image manquant</div>
        <img
            v-else
            :src="imageSource"
            :alt="`Page ${pageNumber}`"
            class="page-image"
            :style="imageStyle"
            @load="handleImageLoad"
            ref="imageRef" />
    </div>
</template>

<script setup>
    import { computed, onMounted, onUnmounted, ref } from 'vue';

    const props = defineProps({
        pageData: {
            type: Object,
            required: true
        },
        pageNumber: {
            type: Number,
            required: true
        },
        zoom: {
            type: Number,
            required: true
        }
    });

    const imageRef = ref(null);
    const naturalWidth = ref(0);
    const naturalHeight = ref(0);
    const windowWidth = ref(window.innerWidth);

    const imageSource = computed(() => {
        if (!props.pageData?.base64Content || !props.pageData?.mimeType) {
            return '';
        }
        return `data:${props.pageData.mimeType};base64,${props.pageData.base64Content}`;
    });

    const handleImageLoad = () => {
        if (imageRef.value) {
            naturalWidth.value = imageRef.value.naturalWidth;
            naturalHeight.value = imageRef.value.naturalHeight;
        }
    };

        // Calculer la largeur maximale en fonction de la largeur disponible
    const maxWidth = computed(() => {
        if (!naturalWidth.value || !naturalHeight.value) return null;

        const availableWidth = windowWidth.value;

        // Si la largeur disponible est < 1200px : utiliser 95% de la largeur
        if (availableWidth < 1200) {
            return Math.min(naturalWidth.value, availableWidth * 0.95);
        }

        // Si la largeur disponible est >= 1200px : limiter à 1200px maximum
        return Math.min(naturalWidth.value, 1200);
    });

    const imageStyle = computed(() => {
        if (!maxWidth.value) return {};

        return {
            width: `${maxWidth.value}px`,
            height: 'auto',
            maxWidth: '100%'
        };
    });

    // Gestion du redimensionnement de la fenêtre
    const handleResize = () => {
        windowWidth.value = window.innerWidth;
    };

    onMounted(() => {
        if (imageRef.value && imageRef.value.complete) {
            handleImageLoad();
        }
        window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
    });
</script>

<style lang="postcss" scoped>
    .page-container {
        @apply flex-1 flex items-center justify-center overflow-hidden;
        transform-origin: center;
        /* Réduction des marges sur mobile */
        @apply p-0 sm:p-2;
    }

    .page-image {
        @apply object-contain;
        /* La largeur est gérée par le JavaScript, on garde juste les contraintes max */
        max-width: 100%;
        max-height: 100%;
    }

    .error {
        @apply text-red-500 text-xl;
    }
</style>


