import Vue from 'vue/dist/vue'
import EventBus from '../util/EventBus';
import EventTypes from '../util/EventTypes';

Vue.component('media-item', {
    props: {
        'id': {},
        'media': {},
        'type': {},
        'mediaUrl': {},
        'mediaSize': {},
        'sizeReadable': {},
        'mediaTypesConfig': {},
    },
    data: function () {
        return {}
    },
    methods: {
        mediaSelect: function () {
            EventBus.$emit(EventTypes.MEDIA_SELECT, {
                media: this.media,
                type: this.type,
            });
        },
        mediaDelete: function () {
            EventBus.$emit(EventTypes.MEDIA_DELETE, {
                media: this.media,
                type: this.type,
            });
        },
        forceLoadPreview: function () {
            this.$refs.mediaImage.src = this.$refs.mediaImage.dataset.src
            this.$refs.forceLoadPreviewBtn.style.display = 'none'
        },
        getMediaTypeLabel: function () {
            if (typeof this.mediaTypesConfig[this.type] !== 'undefined') {
                return this.mediaTypesConfig[this.type].label;
            }
            return '';
        },
        getDisplayMaxSize: function () {
            if (typeof this.mediaTypesConfig[this.type] !== 'undefined') {
                return this.mediaTypesConfig[this.type].display_max_size;
            }
            return 5242880;
        },
        getDisplayMaxSizeLabel: function () {
            const humanSize = parseInt(this.getDisplayMaxSize()) / (1024 * 1024);
            console.log(humanSize);
            const label = 'Image trop volumineuse (>' + humanSize + 'Mo),<br/> cliquer pour afficher.';
            return label;
        },
    },
    mounted() {
        // do not trigger drag event from item image, conflicts with upload drag and drop
        if (this.$refs.mediaImage) {
            this.$refs.mediaImage.addEventListener('dragstart', (e) => {
                e.preventDefault();
            });
        }
    },
    template: `
        <div class="media-item col-6" v-bind:data-media-type="type">
            <div class="inner-wrap">
                <div class="badge-wrap">
                    <div class="badge badge-info">{{ this.getMediaTypeLabel() }}</div>
                </div>
                <div class="infos-wrap">
                    <div class="info filename-holder" :title="media.fileName">{{ media.fileName }}</div>
                    <div class="info size-holder">{{ sizeReadable }}</div>
                </div>
                <div class="media-preview">
                    <img
                        ref="mediaImage"
                        v-if="this.type.startsWith('image') || this.type.startsWith('private_image')"
                        :src="this.mediaSize < this.getDisplayMaxSize() ? this.mediaUrl : ''"
                        :data-src="this.mediaUrl"
                        :alt="this.media.alt"
                    />
                    <i v-else class="fa-regular fa-photo-film"></i>
                    <button
                        ref="forceLoadPreviewBtn"
                        class="btn"
                        v-if="this.mediaSize > this.getDisplayMaxSize()"
                        @click="forceLoadPreview"
                        v-html="getDisplayMaxSizeLabel()"
                    ></button>
                </div>
                <div class="media-bottom">
                    <div class="row actions">
                        <div class="col-9">
                            <button class="btn btn-primary" @click="mediaSelect">Choisir</button>
                        </div>
                        <div class="col-3">
                            <button class="btn btn-danger" @click="mediaDelete">Supprimer</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `
});
