<template>
    <div class="no-border no-padding text-center" style="min-height: auto;">
        <div class="dz-message hide"></div>
        <div class="dragzone row m-l-0 m-r-0 bg-master-lightest" :class="[{'m-b-15': hasFile}]" style="border-width: 1px;">
            <div class="col">
                <loading-component style="height: 200px; top: 0;" color="success" v-show="isLoading"></loading-component>
                <div class="row" v-show="!isLoading">
                    <div class="col">
                        <div class="row p-b-20 p-t-15" v-show="!hasFile" style="min-height: 150px;">
                            <div class="col">
                                <div class="row justify-content-center m-b-10 m-t-10">
                                    <div class="col-auto">
                                        <div class="icon-thumbnail bg-transparent">
                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                 viewBox="0 0 172 172"
                                                 style=" fill:#000000;"><defs><linearGradient x1="86" y1="79.28125" x2="86" y2="149.85769" gradientUnits="userSpaceOnUse" id="color-1_48264_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="19.48438" x2="86" y2="131.01831" gradientUnits="userSpaceOnUse" id="color-2_48264_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M104.8125,104.8125l-16.60337,-23.71987c-1.075,-1.53456 -3.34594,-1.53456 -4.41825,0l-16.60338,23.71988h13.4375v40.3125c0,1.4835 1.204,2.6875 2.6875,2.6875h5.375c1.4835,0 2.6875,-1.204 2.6875,-2.6875v-40.3125z" fill="url(#color-1_48264_gr1)"></path><path d="M137.60269,67.97763c1.41362,-3.66575 2.14731,-7.53037 2.14731,-11.54013c0,-17.78319 -14.46681,-32.25 -32.25,-32.25c-13.87287,0 -25.95319,8.82306 -30.41444,21.55912c-0.16394,-0.13437 -0.34937,-0.23919 -0.516,-0.36819c-0.52406,-0.40581 -1.05888,-0.79281 -1.61519,-1.15563c-0.35206,-0.22844 -0.7095,-0.44344 -1.06963,-0.65306c-0.52137,-0.301 -1.05619,-0.57781 -1.60175,-0.84119c-0.31712,-0.15319 -0.62619,-0.3225 -0.95137,-0.45956c-0.8385,-0.36012 -1.70119,-0.66919 -2.58537,-0.93256c-0.29025,-0.086 -0.58588,-0.1505 -0.87881,-0.22575c-0.69875,-0.18006 -1.40825,-0.33325 -2.13119,-0.44881c-0.301,-0.05106 -0.59663,-0.10213 -0.90031,-0.13706c-0.99438,-0.12631 -1.99681,-0.21231 -3.02344,-0.21231c-13.33537,0 -24.1875,10.84944 -24.1875,24.1875v8.0625c-11.85456,0 -21.5,9.64544 -21.5,21.5c0,11.85456 9.64544,21.5 21.5,21.5h2.6875v2.6875c0,4.44512 3.61738,8.0625 8.0625,8.0625h24.1875v-5.375h-24.1875c-1.48081,0 -2.6875,-1.204 -2.6875,-2.6875v-2.6875h26.875v-5.375h-34.9375c-8.89294,0 -16.125,-7.23206 -16.125,-16.125c0,-8.89294 7.23206,-16.125 16.125,-16.125h10.75v-5.375h-5.375v-8.0625c0,-10.37106 8.43875,-18.8125 18.8125,-18.8125c0.7955,0 1.57756,0.06719 2.35156,0.16394c0.23112,0.02956 0.45956,0.06719 0.688,0.1075c0.56975,0.09406 1.12875,0.21231 1.68238,0.35475c0.22037,0.05644 0.44075,0.10481 0.65844,0.16931c0.69338,0.20694 1.37063,0.44881 2.03175,0.73369c0.23381,0.10213 0.45956,0.22306 0.688,0.33325c0.44613,0.215 0.88688,0.44344 1.31419,0.69069c0.26337,0.15319 0.52406,0.30906 0.77669,0.473c0.47569,0.30906 0.93794,0.63963 1.38406,0.99169c0.19081,0.1505 0.38431,0.29831 0.56975,0.45688c0.50525,0.43 0.98631,0.88687 1.44319,1.37063c0.14781,0.15588 0.28756,0.31444 0.43,0.473c0.47837,0.5375 0.93525,1.0965 1.3545,1.69312c0.02419,0.03225 0.04838,0.06181 0.06987,0.09406c0.48375,0.69875 0.92181,1.43781 1.31419,2.21181c1.30612,2.55313 2.05594,5.43413 2.05594,8.49519h5.375c0,-3.913 -0.95406,-7.59756 -2.60956,-10.86825l0.00806,-0.00269c-0.01613,-0.02956 -0.03494,-0.05644 -0.05106,-0.086c-0.4945,-0.96481 -1.04006,-1.89738 -1.6555,-2.78425c-0.05644,-0.08331 -0.12363,-0.15856 -0.18275,-0.24188c-0.05106,-0.06987 -0.10481,-0.13975 -0.15587,-0.20962c2.81919,-12.09106 13.60144,-20.74481 26.14669,-20.74481c14.81888,0 26.875,12.05613 26.875,26.875c0,3.77056 -0.80088,7.3745 -2.29512,10.7715l-8.4495,-0.0215l-0.01344,5.375l8.44144,0.0215c10.1695,0.19888 18.44163,8.62956 18.44163,18.791c0,10.37106 -8.43875,18.8125 -18.8125,18.8125h-32.25v5.375h26.875v2.6875c0,1.4835 -1.20669,2.6875 -2.6875,2.6875h-24.1875v5.375h24.1875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-2.6875c13.33538,0 24.1875,-10.84944 24.1875,-24.1875c0,-11.18537 -7.80181,-20.71256 -18.27231,-23.39737z" fill="url(#color-2_48264_gr2)"></path></g></g></svg>
                                        </div>
                                    </div>
                                </div>
                                <div class="row m-b-10">
                                    <div class="col">
                                        <div class="all-caps fs-12 hint-text" style="letter-spacing: 1px;">Drag and drop files here</div>
                                    </div>
                                </div>
                                <div class="row m-b-10 justify-content-center">
                                    <div class="col-4">
                                        <div class="row align-items-center">
                                            <div class="col b-t b-grey"></div>
                                            <div class="col-auto all-caps fs-10 hint-text muted">Or</div>
                                            <div class="col b-t b-grey"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="btn btn-sm btn-outline-complete b-rad-none pointer select-btn hint-text">Browse files</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row text-left" v-show="hasFile">
                            <div class="col p-b-15 p-t-15">
                                <div class="all-caps fs-12 hint-text" style="letter-spacing: 1px;">Drag and drop files here</div>
                            </div>
                            <div class="col-2 no-padding">
                                <div class="btn btn-xs btn-complete bg-complete-light btn-block b-rad-none pointer select-btn h-100">
                                    <div class="row align-items-center h-100">
                                        <div class="col">
                                            <i class="fa fa-plus"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: Array,
                required: false
            }
        },
        data(){
          return {
              isLoading: false,
              hasFile: false,
              files: []
          }
        },
        mounted(){
            let vm = this;

            var dropzone = new Dropzone(this.$el, {
                url: '#',
                autoQueue: false,
                processQueue: false,
                acceptedFiles: 'image/*, application/pdf',
                uploadMultiple: true,
                clickable: '.select-btn',
                previewTemplate: '<div class="row m-l-0 m-r-0 align-items-center m-t-5 m-b-5 bg-master-lightest text-left p-t-10 p-b-10 "> <div class="col-auto p-r-0"> <img data-dz-thumbnail style="width: 35px; height: 35px;" /> </div> <div class="col"> <div class="row m-b-5"> <div class="col"> <div class="dz-filename fs-8 bold"><span data-dz-name></span></div> </div> </div> <div class="row"> <div class="col"> <div class="dz-size muted light fs-10" data-dz-size></div> </div> </div> </div> <div class="col-auto"><i class="fs-16 fa fa-times-circle pointer hint-text" data-dz-remove></i></div> </div>'
            });

            dropzone.autoDiscover = false;

            dropzone.on("removedfile", function() {
                vm.updateFiles(dropzone.files);
            });

            dropzone.on("addedfile", function(file) {

                vm.isLoading = true;

                if(file.name.split('.').pop() === 'pdf'){
                    $(file.previewElement).closest("img[data-dz-thumbnail]").attr("src", "/images/icons/pdf.png");
                }
                if(file.name.split('.').pop().indexOf("xls") !== -1){
                    $(file.previewElement).closest("img[data-dz-thumbnail]").attr("src", "/images/icons/xlsx.png");
                }

                Promise.all(dropzone.files.map(function(file){
                    return vm.fileToBase64(file).then(function(data){
                        return data;
                    })
                })).then(function(files) {
                    vm.isLoading = false;
                    vm.updateFiles(files);
                })

            });

            dropzone.on("dragover", function() {
                $(vm.$el).closest('.dragzone').css('opacity', 0.5)
            });

            dropzone.on("dragleave", function() {
                $(vm.$el).closest('.dragzone').css('opacity', 1)
            });

            dropzone.on("drop", function() {
                $(vm.$el).closest('.dragzone').css('opacity', 1)
            });
        },
        methods: {
            fileToBase64(file) {
                return new Promise(resolve => {
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        resolve(event.target.result);
                    };

                    reader.readAsDataURL(file);
                });
            },
            updateFiles(files){
                this.hasFile =  !!files.length;
                this.files =  files;
                this.$emit('input', files)
            }
        }

    }
</script>