<template>
    <h2>{{ $t('socialnetwork.gallery.title') }}</h2>
    <div class="gallery-view">
        <div class="sidebar">
            <h3>{{ $t('socialnetwork.gallery.folders') }}</h3>
            <ul class="tree">
                <folder-item v-for="folder in [folders]" :key="folder.id" :folder="folder"
                    :selected-folder="selectedFolder" @select-folder="selectFolder" :isLastItem="true" :depth="0"
                    :parentsWithChildren="[false]" @edit-folder="openEditFolderDialog" @delete-folder="deleteFolder">
                </folder-item>
            </ul>
            <button @click="openCreateFolderDialog">{{ $t('socialnetwork.gallery.create_folder') }}</button>
        </div>

        <div class="content">
            <div class="upload-section">
                <div class="upload-header" @click="toggleUploadSection">
                    <span>
                        <i class="icon-upload-toggle">{{ isUploadVisible ? '&#9650;' : '&#9660;' }}</i>
                    </span>
                    <h3>{{ $t('socialnetwork.gallery.upload.title') }}</h3>
                </div>
                <div v-if="isUploadVisible" class="upload-content">
                    <form @submit.prevent="handleUpload">
                        <div class="form-group">
                            <label for="imageTitle">{{ $t('socialnetwork.gallery.upload.image_title') }}</label>
                            <input type="text" v-model="imageTitle"
                                :placeholder="$t('socialnetwork.gallery.upload.image_title')" />
                        </div>

                        <div class="form-group">
                            <label for="imageFile">{{ $t('socialnetwork.gallery.upload.image_file') }}</label>
                            <input type="file" @change="onFileChange" accept="image/*" required />
                            <div v-if="imagePreview" class="image-preview">
                                <img :src="imagePreview" alt="Image Preview"
                                    style="max-width: 150px; max-height: 150px;" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="visibility">{{ $t('socialnetwork.gallery.upload.visibility') }}</label>
                            <multiselect v-model="selectedVisibilities" :options="visibilityOptions" :multiple="true"
                                :close-on-select="false" label="description"
                                :placeholder="$t('socialnetwork.gallery.upload.selectvisibility')" :track-by="'value'">
                                <template #option="{ option }">
                                    <span v-if="option && option.description">
                                        {{ $t(`socialnetwork.gallery.visibility.${option.description}`) }}
                                    </span>
                                </template>
                                <template #tag="{ option, remove }">
                                    <span v-if="option && option.description" class="multiselect__tag">
                                        {{ $t(`socialnetwork.gallery.visibility.${option.description}`) }}
                                        <span @click="remove(option)">×</span>
                                    </span>
                                </template>
                            </multiselect>
                        </div>

                        <button type="submit" class="upload-button">
                            {{ $t('socialnetwork.gallery.upload.upload_button') }}
                        </button>
                    </form>
                </div>
            </div>

            <div class="image-list">
                <h3>{{ $t('socialnetwork.gallery.images') }}</h3>
                <ul v-if="images.length > 0">
                    <li v-for="image in images" :key="image.id" @click="openImageDialog(image)">
                        <img :src="image.url || image.placeholder" alt="Loading..." />
                        <p>{{ image.title }}</p>
                    </li>
                </ul>
                <span v-else>{{ $t('socialnetwork.gallery.noimages') }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import apiClient from '@/utils/axios.js';
import Multiselect from 'vue-multiselect';
import FolderItem from '../../components/FolderItem.vue';
import 'vue-multiselect/dist/vue-multiselect.min.css';
import { EventBus } from '@/utils/eventBus.js';

export default {
    components: {
        FolderItem,
        Multiselect,
    },
    data() {
        return {
            folders: { children: [] },
            images: [],
            selectedFolder: null,
            imageTitle: '',
            fileToUpload: null,
            isUploadVisible: false,
            visibilityOptions: [],
            selectedVisibilities: [],
            imagePreview: null,
        };
    },
    async mounted() {
        await this.loadFolders();
        await this.loadImageVisibilities();
        if (this.folders) {
            this.selectFolder(this.folders);
        }
        EventBus.on('folderCreated', this.loadFolders);
    },
    beforeUnmount() {
        EventBus.off('folderCreated', this.loadFolders);
    },
    methods: {
        async loadFolders() {
            try {
                const response = await apiClient.get('/api/socialnetwork/folders');
                this.folders = response.data;
            } catch (error) {
                console.error('Error loading folders:', error);
            }
        },
        async loadImageVisibilities() {
            try {
                const response = await apiClient.get('/api/socialnetwork/imagevisibilities');
                this.visibilityOptions = response.data;
            } catch (error) {
                console.error('Error loading visibility options:', error);
            }
        },
        async selectFolder(folder) {
            this.selectedFolder = folder;
            await this.loadImages(folder.id);
        },
        async loadImages(folderId) {
            try {
                const response = await apiClient.get(`/api/socialnetwork/folder/${folderId}`);
                this.images = response.data.map((image) => ({
                    ...image,
                    placeholder:
                        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3C/svg%3E', // Placeholder SVG
                    url: null, 
                }));
                await this.fetchImages();
            } catch (error) {
                console.error('Error loading images:', error);
            }
        },
        async fetchImages() {
            this.images.forEach((image) => {
                this.fetchImage(image);
            });
        },
        openCreateFolderDialog() {
            const parentFolder = this.selectedFolder || { id: null, name: this.$t('socialnetwork.gallery.root_folder') };
            Object.assign(this.$root.$refs.createFolderDialog, {
                parentFolder: parentFolder,
                folderId: 0,
            });
            this.$root.$refs.createFolderDialog.open();
        },
        async handleFolderCreated() {
            await this.loadFolders();
        },
        onFileChange(event) {
            this.fileToUpload = event.target.files[0];
            const reader = new FileReader();
            reader.onload = (e) => {
                this.imagePreview = e.target.result;
            };
            reader.readAsDataURL(this.fileToUpload);
        },
        async handleUpload() {
            if (!this.fileToUpload) return;

            const formData = new FormData();
            formData.append('image', this.fileToUpload);
            formData.append('folderId', this.selectedFolder.id);
            formData.append('title', this.imageTitle);
            formData.append('visibility', JSON.stringify(this.selectedVisibilities.map((v) => v.id)));

            try {
                await apiClient.post('/api/socialnetwork/images', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });
                this.loadImages(this.selectedFolder.id);
                this.imageTitle = '';
                this.fileToUpload = null;
                this.imagePreview = null;
                this.selectedVisibilities = [];
            } catch (error) {
                console.error('Error uploading image:', error);
            }
        },
        async fetchImage(image) {
            const userId = localStorage.getItem('userid');
            try {
                const response = await apiClient.get(`/api/socialnetwork/image/${image.hash}`, {
                    headers: {
                        userid: userId,
                    },
                    responseType: 'blob',
                });
                image.url = URL.createObjectURL(response.data);
            } catch (error) {
                console.error('Error fetching image:', error);
            }
        },
        toggleUploadSection() {
            this.isUploadVisible = !this.isUploadVisible;
        },
        openImageDialog(image) {
            this.$root.$refs.editImageDialog.open(image);
        },
        async saveImage(updatedImage) {
            try {
                const response =  await apiClient.put(`/api/socialnetwork/images/${updatedImage.id}`, {
                    title: updatedImage.title,
                    visibilities: updatedImage.visibilities,
                });
                this.images = response.data.map((image) => ({
                    ...image,
                    placeholder:
                        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3C/svg%3E', // Placeholder SVG
                    url: null,
                }));
                await this.fetchImages();
            } catch (error) {
                console.error('Error saving image:', error);
            }
        },
        openEditFolderDialog(folder) {
            const parentFolder = folder.parent || { id: null, name: this.$t('socialnetwork.gallery.root_folder') };
            Object.assign(this.$root.$refs.createFolderDialog, {
                parentFolder: parentFolder,
                folderId: folder.id,
            });
            this.$root.$refs.createFolderDialog.open(folder);
        },
        async deleteFolder(folder) {
            const folderName = folder.name;
            const confirmed = await this.$root.$refs.chooseDialog.open({
                title: this.$t('socialnetwork.gallery.delete_folder_confirmation_title'),
                message: this.$t('socialnetwork.gallery.delete_folder_confirmation_message').replace('%%folderName%%', folderName),
            });
            if (confirmed) {
                const deletedFolderIsCurrentFolder = folder.id === this.selectFolder.id;
                try {
                    await apiClient.delete(`/api/socialnetwork/folders/${folder.id}`);
                    await this.loadFolders();
                } catch (error) {
                    console.error('Fehler beim Löschen des Ordners:', error);
                }
                if (deletedFolderIsCurrentFolder) {
                    this.selectFolder = this.folders[0];
                }
            }
        },
    },
};
</script>

<style scoped>
.gallery-view {
    display: flex;
}

.sidebar {
    width: 200px;
    margin-right: 20px;
}

.content {
    flex: 1;
}

.upload-section {
    margin-bottom: 20px;
}

.image-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.image-list li {
    margin: 4px;
}

.icon-upload-toggle {
    float: left;
    cursor: pointer;
}

.multiselect {
    display: inline-block;
    width: auto;
}

.folder-item {
    padding: 5px;
    cursor: pointer;
}

.folder-item.selected {
    background-color: lightgray;
}

.image-list > ul {
    list-style-type: none;
    padding: 0;
}

.image-list > ul > li {
    display: inline-block;
    padding: 2px;
    border: 1px solid #F9A22C;
}

.image-list > ul > li > p {
    text-align: center;
}

.image-list li img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    cursor: pointer;
}

.icon {
    cursor: pointer;
    margin-left: 10px;
}

.edit-icon {
    color: green;
}

.delete-icon {
    color: red;
}

.tree {
    padding: 0;
}
</style>
