<template>
    <div @dragenter.stop.prevent @dragover.stop.prevent @drop.stop.prevent="drop" id="upload" class="flex flex-column ph4 pv4 ba bw1 b--light-red br1 bg-near-white mid-gray">

        <div class="title f6 b lh-title ttu tc">drop files here</div>

        <div class="or f6 mv2 tc">or</div>


        <form class="input-reset flex flex-column justify-center">

            <!--hidden file input-->
            <input id="fileInput" class="dn" v-on:change="fileChange($event)" type="file" multiple />
            <button class="mb3" @click.stop.prevent="chooseFiles" id="fileSelect">pick files</button>

            <div class="askFee flex justify-start items-center">
                <input id="request_payment" type="checkbox" v-model="options.request_payment">
                <label class="ph2 pv2" for="request_payment">Ask fee for download ?</label>
            </div>
            <div class="options w-100 flex flex-row justify-between">
                <input :disabled="!options.request_payment" placeholder="ask fee for download" v-model.trim.number="options.request_payment_amount" type="number">

                <select :disabled="!options.request_payment" v-model="options.payment_currency">
                    <option v-for="cur in currencies">{{cur}}</option>
                </select>
            </div>



        <!--<p>selected {{fileCount}} files</p>-->
        <!--<ul>-->
            <!--<li v-bind:files="files" v-for="file in files">  -->
                <!--{{ file.name }}-->
                <!--<ul>-->
                    <!--<li>size: {{ file.size / 1000 }} kB </li>-->
                    <!--<li>type: {{ file.type }} </li>-->
                <!--</ul>-->
            <!--</li>-->
        <!--</ul>-->

        </form>


    </div>
</template>

<script charset="utf-8">
import { mapState } from 'vuex'
import GetWorker from './workerInterface.js';
const Worker = GetWorker('main');



export default {
    data(){
        return {
            fileCount: 0,
            files: [],
            currencies: ['EUR', 'USD', 'SAT', 'MSAT'],
        }
    },
    mounted(){
        this.fileInput = this.$el.querySelector('#fileInput')
        this.worker = Worker


    },
    computed:{
        ...mapState({
            options: state => state.upload.options
        })
    },
    methods: {
        drop(event){
            this.files=[]
            const dt = event.dataTransfer;
            this.fileCount = dt.files.length;
            this.files = dt.files;

            this.worker.post({
                msg: 'new-upload',
                payload: {
                    files: [...this.files],
                    options: this.options
                }
            })


        },
        chooseFiles(event){
            console.log("calling choose files")
            this.fileInput.click();
        },
        fileChange(event) {
            // reset
            this.files = []


            this.fileCount = event.target.files.length
            this.files = event.target.files

            console.log('filechange notifying new-upload')
            this.worker.post({
                msg: 'new-upload',
                payload: {
                    files: [...this.files],
                    options: this.options
                }
            })

            // Get sha256 of files
//            for (let file of this.files) {
//                w.post({
//                    msg: 'file-sha256',
//                    payload: file
//                })
//            }

        }
    }
}

</script>
