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

Vue.component('media-item', {
    props: {
        'id': {},
        'media': {},
        'mediaUrl': {},
        'sizeReadable': {},
        'type': {},
    },
    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,
            });
        },
    },
    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 badge-info">{{ type }}</div>
          <div class="media-preview">
            <img ref="mediaImage" v-if="this.type === 'image'" :src="this.mediaUrl" :alt="this.media.alt"/>
            <i v-else class="fa-regular fa-photo-film"></i>
          </div>
          <div class="media-bottom">
            <div class="row">
              <div class="col-9 filename-holder" :title="media.fileName">{{ media.fileName }}</div>
              <div class="col-3 size-holder">{{ sizeReadable }}</div>
            </div>
            <div class="row">
              <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>
    `
});