<template>
    <DialogWidget ref="dialog" title="socialnetwork.gallery.edit_image_dialog.title" icon="image16.png"
        :show-close="true" :buttons="buttons" :modal="true" :isTitleTranslated="true" @close="closeDialog"
        name="EditImageDialog">
        <div>
            <div class="image-container">
                <img :src="image.url" alt="Image" :style="{ maxWidth: '600px', maxHeight: '600px' }" />
            </div>
            <div class="form-group">
                <label for="imageTitle">{{ $t('socialnetwork.gallery.imagedialog.image_title') }}</label>
                <input type="text" v-model="imageTitle" />
            </div>
            <div class="form-group">
                <label for="visibility">{{ $t('socialnetwork.gallery.imagedialog.edit_visibility') }}</label>
                <multiselect v-model="selectedVisibilities" :options="visibilityOptions" :multiple="true"
                    label="description" :track-by="'id'" :close-on-select="false"
                    :placeholder="$t('socialnetwork.gallery.imagedialog.edit_visibility_placeholder')">
                    <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>
        </div>
    </DialogWidget>
</template>

<script>
import Multiselect from 'vue-multiselect';
import DialogWidget from '@/components/DialogWidget.vue';

export default {
    name: "EditImageDialog",
    components: {
        DialogWidget,
        Multiselect,
    },
    data() {
        return {
            image: null,
            imageTitle: '',
            selectedVisibilities: [],
            visibilityOptions: [],
        };
    },
    computed: {
        buttons() {
            return [
                { text: this.$t('socialnetwork.gallery.imagedialog.save_changes'), action: this.saveChanges },
                { text: this.$t('socialnetwork.gallery.imagedialog.close'), action: this.closeDialog }
            ];
        },
    },
    methods: {
        open(image) {
            this.image = image;
            this.imageTitle = image.title;
            this.selectedVisibilities = image.visibilities || [];
            this.$refs.dialog.open();
        },
        closeDialog() {
            this.$refs.dialog.close();
        },
        async saveChanges() {
            const updatedImage = {
                ...this.image,
                title: this.imageTitle,
                visibilities: this.selectedVisibilities,
            };

            try {
                this.$emit('save', updatedImage);
                this.closeDialog();
            } catch (error) {
                console.error('Error saving image changes:', error);
            }
        },
    },
};
</script>

<style scoped>
.form-group {
    margin-bottom: 15px;
}

.image-container {
    text-align: center;
    margin-bottom: 20px;
}

.multiselect {
    display: inline-block;
    width: auto;
}
</style>
