<template>
    <default-field :field="field">
        <template slot="field">
            <div class="mb-6">
                <template>
                    <div class="uploader"
                        @dragenter="OnDragEnter"
                        @dragleave="OnDragLeave"
                        @dragover.prevent
                        @drop="onDrop"
                        :class="{ dragging: isDragging }">

                        <div class="upload-control" v-show="images.length">
                            <label for="file">Добавить файл</label>
                        </div>

                        <div v-show="!images.length">
                            <i class="fa fa-cloud-upload"></i>
                            <p>Перетащи</p>
                            <div>или</div>
                            <div class="file-input">
                                <label for="file">выбери файл</label>
                                <input type="file" id="file" @change="onInputChange" multiple>
                            </div>
                        </div>

                        <div class="images-preview" v-show="images.length">
                            <draggable class="dragArea" :options="{group:'images'}">
                            <vue-select-image :dataImages="images"
                                                    @onselectimage="onSelectImage"
                                                    :rootClass="'custom-style'">

                                <div class="img-wrapper" v-for="(src, id) in images" :key="id">
                                    <img :src="image" :alt="`Image Uplaoder ${index}`">
                                    <div class="details">
                                        <span class="name" v-text="files[id].name"></span>
                                        <span class="size" v-text="getFileSize(files[id].size)"></span>
                                        <button v-on:click="remove(id)">❌</button>
                                    </div>
                                </div>

                            </vue-select-image>
                            </draggable>
                        </div>
                    </div>
                </template>
            </div>
        </template>
    </default-field>
</template>

<script>
import VueSelectImage from 'vue-select-image'
import { FormField, HandlesValidationErrors } from 'laravel-nova';
import draggable from 'vuedraggable'

export default {
    mixins: [HandlesValidationErrors, FormField],
           components: {
                draggable,
                VueSelectImage
        },
data: () => ({
        isDragging: false,
        dragCount: 0,
        files: [],
        images: [],
        imageSelected: [],
        initialSelected: [],
        templateSingle: `
        <vue-select-image :dataImages="dataImages"
            @onselectimage="onSelectImage">
        </vue-select-image>
      `,
      dataImages: [{
        id: '1',
        src: 'http://placekitten.com/200/200',
        alt: 'jQuery'
      }, {
        id: '2',
        src: 'http://placekitten.com/200/200',
        alt: 'Angular'
      }, {
        id: '3',
        src: 'http://placekitten.com/200/200',
        alt: 'Vue.js'
      }, {
        id: '4',
        src: 'http://placekitten.com/200/200',
        alt: 'React'
      }],
    }),
    methods: {
        onSelectImage: function (data) {
            console.log('fire event onSelectImage: ', data)
         this.imageSelected = data
        },
        onSelectMultipleImage: function (data) {
            console.log('fire event onSelectMultipleImage: ', data)
            this.imageMultipleSelected = data
        },
        onUnselectSingleImage: function () {
            this.$refs['single-select-image'].removeFromSingleSelected()
        },
        OnDragEnter(e) {
            e.preventDefault();

            this.dragCount++;
            this.isDragging = true;

            return false;
        },
        OnDragLeave(e) {
            e.preventDefault();
            this.dragCount--;

            if (this.dragCount <= 0)
                this.isDragging = false;
        },
        onInputChange(e) {
            const files = e.target.files;

            Array.from(files).forEach(file => this.addImage(file));
        },
        onDrop(e) {
            e.preventDefault();
            e.stopPropagation();

            this.isDragging = false;

            const files = e.dataTransfer.files;

            Array.from(files).forEach(file => this.addImage(file));
        },
        addImage(file) {
            if (!file.type.match('image.*')) {
                this.$toastr.e(`${file.name} is not an image`);
                return;
            }

            this.files.push(file);

            const img = new Image(),
                reader = new FileReader();

            reader.onload = (e) => this.images.push(e.target.result);

            reader.readAsDataURL(file);
        },
        getFileSize(size) {
            const fSExt = ['Bytes', 'KB', 'MB', 'GB'];
            let i = 0;

            while(size > 900) {
                size /= 1024;
                i++;
            }

            return `${(Math.round(size * 100) / 100)} ${fSExt[i]}`;
        },
        upload() {
            const formData = new FormData();

            this.files.forEach(file => {
                formData.append('images[]', file, file.name);
            });

            axios.post('/images-upload', formData)
                .then(response => {
                    this.$toastr.s('Все изображения загружены');
                    this.images = [];
                    this.files = [];
                })
        },
        remove: function(index){
            this.images.splice(index, 1);
    },
    },
    computed: {
        /**
         * Get the input type.
         */
        inputType() {
            return this.field.type || 'text'
        },

        /**
         * Get the input step amount.
         */
        inputStep() {
            return this.field.step
        },

        /**
         * Get the input minimum amount.
         */
        inputMin() {
            return this.field.min
        },

        /**
         * Get the input maximum amount.
         */
        inputMax() {
            return this.field.max
        },

        /**
         * Get the pattern that should be used for the field
         */
        inputPattern() {
            return this.field.pattern
        },
    },
}
</script>