<template>
    <div>
        <div v-if="isOpen" class="dialog-overlay">
            <div class="dialog-content">
                <h3>Bild auswählen</h3>
                <div class="images-container">
                    <div v-for="image in images" :key="image.id" class="image-block" @click="selectImage(image)"
                        :class="{ selected: image.id === selectedImage?.id }">
                        <img :src="'/images/uploads/' + image.filename" />
                        <span v-if="image.description" :title="image.description">{{ image.title }}</span>
                        <span v-else>{{ image.title }}</span>
                    </div>
                </div>
                <div class="button-container">
                    <button @click="confirmAddImageConfiguration">Bestätigen</button>
                    <button @click="closeAddImageDialog">Schließen</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import axios from '@/axios';

export default {
    name: 'AddImageDialog',
    emits: ['confirm'],
    setup(props, { emit }) {
        const isOpen = ref(false);
        const images = ref([]);
        const selectedImage = ref(null);

        const openAddImageDialog = () => {
            isOpen.value = true;
            fetchImages();
        };

        const closeAddImageDialog = () => {
            isOpen.value = false;
        };

        const confirmAddImageConfiguration = () => {
            if (selectedImage.value) {
                emit('confirm', `${selectedImage.value.id}`);
            }
            closeAddImageDialog();
        };

        const fetchImages = async () => {
            try {
                const response = await axios.get('/image');
                images.value = response.data;
            } catch (error) {
                console.error('Fehler beim Laden der Bilder:', error);
                images.value = [];
            }
        };

        const selectImage = (image) => {
            console.log(image);
            selectedImage.value = image;
        };

        return {
            isOpen,
            images,
            selectedImage,
            openAddImageDialog,
            closeAddImageDialog,
            confirmAddImageConfiguration,
            selectImage,
        };
    },
};
</script>

<style scoped>
.dialog-overlay {
    top: calc(50% - 25em);
    left: 5%;
    width: 90%;
    height: 50em;
    background: rgba(240, 240, 240, .9);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    position: fixed;
    border: 1px solid #404040;
    box-shadow: 3px 3px 8px #909090;
}

.dialog-content {
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

.images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.images-container img {
    cursor: pointer;
    border: 2px solid transparent;
}

.images-container img:hover {
    border-color: #007bff;
}

.image-block {
    display: inline-block;
    margin: 2.5px;
}

.image-block img {
    max-width: 150px;
    max-height: 150px;
}

.selected {
    border: 2px solid black;
}

.button-container {
    border-top: 1px solid #404040;
    background-color: #808080;
    margin: 0 -20px -20px -20px;
    padding: 12px 20px;
}
</style>
