<template>
    <studip-dialog
        :title="$gettext('Darstellung')"
        :confirmText="$gettext('Speichern')"
        confirmClass="accept"
        :closeText="$gettext('Schließen')"
        closeClass="cancel"
        height="560"
        width="870"
        @close="$emit('close')"
        @confirm="storeLayout"
    >
        <template v-slot:dialogContent>
            <div v-if="currentElement && !loadingInstance" class="cw-unit-item-dialog-layout-content">
                <form class="default cw-unit-item-dialog-layout-content-image" @submit.prevent="">
                    <label>{{ $gettext('Vorschaubild') }}</label>
                    <img
                        v-if="showPreviewImage"
                        :src="image"
                        class="cw-structural-element-image-preview"
                        :alt="$gettext('Vorschaubild')"
                    />
                    <label v-if="showPreviewImage">
                        <button class="button" @click="deleteImage">{{ $gettext('Bild löschen') }}</button>
                    </label>
                    <courseware-companion-box v-if="uploadFileError" :msgCompanion="uploadFileError" mood="sad" />
                    <template v-if="!showPreviewImage">
                        <img
                            v-if="currentFile"
                            :src="uploadImageURL"
                            class="cw-structural-element-image-preview"
                            :alt="$gettext('Vorschaubild')"
                        />
                        <div v-else class="cw-structural-element-image-preview-placeholder"></div>
                        <label>
                            {{ $gettext('Bild hochladen') }}
                            <input
                                class="cw-file-input"
                                ref="upload_image"
                                type="file"
                                accept="image/*"
                                @change="checkUploadFile"
                            />
                        </label>
                        {{ $gettext('oder') }}
                        <br />
                        <button class="button" type="button" @click="showStockImageSelector = true">
                            {{ $gettext('Aus dem Bilderpool auswählen') }}
                        </button>
                        <StockImageSelector
                            v-if="showStockImageSelector"
                            @close="showStockImageSelector = false"
                            @select="onSelectStockImage"
                        />
                    </template>
                </form>
                <form class="default cw-unit-item-dialog-layout-content-settings" @submit.prevent="">
                    <label>
                        {{ $gettext('Titel') }}
                        <input type="text" v-model="currentElement.attributes.title" />
                    </label>
                    <label>
                        {{ $gettext('Beschreibung') }}
                        <textarea
                            v-model="currentElement.attributes.payload.description"
                            class="cw-structural-element-description"
                        />
                    </label>
                    <label for="payload-color">
                        {{ $gettext('Farbe') }}
                    </label>
                    <StudipSelect
                        id="payload-color"
                        v-model="currentElement.attributes.payload.color"
                        :options="colors"
                        :reduce="(color) => color.class"
                        label="name"
                        class="cw-vs-select"
                        :clearable="false"
                    >
                        <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}. </template>
                        <template #selected-option="option">
                                <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                ><span>{{ option.name }}</span>
                        </template>
                        <template #option="option">
                                <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                ><span>{{ option.name }}</span>
                        </template>
                    </StudipSelect>
                    <label>
                        {{ $gettext('Titelseite') }}
                        <select v-model="currentRootLayout">
                            <option value="default">{{ $gettext('Automatisch') }}</option>
                            <option value="toc">{{ $gettext('Automatisch mit Inhaltsverzeichnis') }}</option>
                            <option value="classic">{{ $gettext('Frei bearbeitbar') }}</option>
                            <option value="none">{{ $gettext('Keine') }}</option>
                        </select>
                    </label>
                </form>
            </div>
        </template>
    </studip-dialog>
</template>

<script>
import CoursewareCompanionBox from '../layouts/CoursewareCompanionBox.vue';
import StockImageSelector from '../../stock-images/SelectorDialog.vue';
import colorMixin from '@/vue/mixins/courseware/colors.js';
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'courseware-unit-item-dialog-layout',
    emits: ['close'],
    components: {
        CoursewareCompanionBox,
        StockImageSelector,
    },
    props: {
        unit: Object,
        unitElement: Object,
    },
    mixins: [colorMixin],
    data() {
        return {
            currentElement: null,
            deletingPreviewImage: false,
            uploadFileError: '',
            currentFile: null,
            uploadImageURL: null,
            currentRootLayout: 'default',
            loadingInstance: false,
            showStockImageSelector: false,
            selectedStockImage: null,
        };
    },
    computed: {
        ...mapGetters({
            context: 'context',
            instanceById: 'courseware-instances/byId',
            userId: 'userId',
        }),
        colors() {
            return this.mixinColors.filter((color) => color.darkmode);
        },
        image() {
            if (this.selectedStockImage) {
                return this.selectedStockImage.attributes['download-urls'].small
            }
            if (this.uploadImageURL) {
                return this.uploadImageURL;
            }
            return this.currentElement.relationships?.image?.meta?.['download-url'] ?? null;
        },

        showPreviewImage() {
            return this.image !== null && this.deletingPreviewImage === false;
        },
        instance() {
            if (this.inCourseContext) {
                return this.instanceById({ id: 'course_' + this.context.id + '_' + this.unit.id });
            } else {
                return this.instanceById({ id: 'user_' + this.context.id + '_' + this.unit.id });
            }
        },
        inCourseContext() {
            return this.context.type === 'courses';
        },
    },
    methods: {
        ...mapActions({
            loadInstance: 'loadInstance',
            companionSuccess: 'companionSuccess',
            companionWarning: 'companionWarning',
            loadStructuralElement: 'loadStructuralElement',
            lockObject: 'lockObject',
            unlockObject: 'unlockObject',
            updateStructuralElement: 'updateStructuralElement',
            uploadImageForStructuralElement: 'uploadImageForStructuralElement',
            deleteImageForStructuralElement: 'deleteImageForStructuralElement',
            storeCoursewareSettings: 'storeCoursewareSettings',
            setStockImageForStructuralElement: 'setStockImageForStructuralElement',
        }),
        async loadUnitInstance() {
            const context = { type: this.context.type, id: this.context.id, unit: this.unit.id };
            await this.loadInstance(context);
        },
        initData() {
            this.currentElement = _.cloneDeep(this.unitElement);
            this.currentRootLayout = this.instance.attributes['root-layout'];
        },
        checkUploadFile() {
            const file = this.$refs?.upload_image?.files[0];
            if (file.size > 2097152) {
                this.uploadFileError = this.$gettext('Diese Datei ist zu groß. Bitte wählen Sie eine kleinere Datei.');
            } else if (!file.type.includes('image')) {
                this.uploadFileError = this.$gettext('Diese Datei ist kein Bild. Bitte wählen Sie ein Bild aus.');
            } else {
                this.uploadFileError = '';
                this.currentFile = file;
                this.uploadImageURL = window.URL.createObjectURL(file);
            }
        },
        deleteImage() {
            if (!this.deletingPreviewImage) {
                this.deletingPreviewImage = true;
            }
        },
        async storeLayout() {
            this.$emit('close');
            await this.loadStructuralElement(this.currentElement.id);
            if (
                this.unitElement.relationships['edit-blocker'].data !== null &&
                this.unitElement.relationships['edit-blocker'].data?.id !== this.userId
            ) {
                this.companionWarning({
                    info: this.$gettext(
                        'Ihre Änderungen konnten nicht gespeichert werden, die Daten werden bereits von einem anderen Nutzer bearbeitet.'
                    ),
                });
                return false;
            } else {
                await this.lockObject({ id: this.currentElement.id, type: 'courseware-structural-elements' });
            }

            if (this.currentFile) {
                this.uploadImageForStructuralElement({
                    structuralElement: this.currentElement,
                    file: this.currentFile,
                })
                    .then(() => {
                        this.loadStructuralElement(this.currentElement.id);
                    })
                    .catch((error) => {
                        console.error(error);
                        this.companionWarning({
                            info: this.$gettext('Beim Hochladen der Bilddatei ist ein Fehler aufgetretten.'),
                        });
                    });
            } else if (this.selectedStockImage) {
                await this.setStockImageForStructuralElement({
                    structuralElement: this.currentElement,
                    stockImage: this.selectedStockImage,
                });
            } else if (this.deletingPreviewImage) {
                await this.deleteImageForStructuralElement(this.currentElement);
                this.currentElement.relationships.image = { data: null };
            }

            await this.updateStructuralElement({
                element: this.currentElement,
                id: this.currentElement.id,
            });
            await this.unlockObject({ id: this.currentElement.id, type: 'courseware-structural-elements' });

            if (this.instance.attributes['root-layout'] !== this.currentRootLayout) {
                let currentInstance = _.cloneDeep(this.instance);
                currentInstance.attributes['root-layout'] = this.currentRootLayout;
                this.storeCoursewareSettings({
                    instance: currentInstance,
                });
            }
        },
        onSelectStockImage(stockImage) {
            if (this.$refs?.upload_image) {
                this.$refs.upload_image.value = null;
            }
            this.selectedStockImage = stockImage;
            this.showStockImageSelector = false;
            this.deletingPreviewImage = false;
        },
    },
    async mounted() {
        this.loadingInstance = true;
        await this.loadUnitInstance();
        this.loadingInstance = false;
        this.initData();
    },
};
</script>
