import { Controller } from '@hotwired/stimulus'
import { useFetch } from '../mixins/use_fetch'
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'
Dropzone.autoDiscover = false

/* stimulusFetch: 'lazy' */
export default class extends Controller {

    static targets = [
        'dropzone',
    ]

    static values = {
        endpointUpload: String,
        endpointDelete: String,
        maxFiles: Number,
        maxFilesize: Number,
        acceptedFiles: String,
        chunking: Boolean,
        params: Object,
    }

    connect () {
        useFetch(this)

        const dropzone = new Dropzone(this.dropzoneTarget, {
            url: this.endpointUploadValue,
            withCredentials: true,
            maxFiles: this.maxFilesValue,
            maxFilesize: this.maxFilesizeValue,
            acceptedFiles: this.acceptedFilesValue,
            chunking: this.chunkingValue,
            chunkSize: 10000000,
            parallelUploads: 3,
            retryChunks: true,
            disablePreviews: false,
            createImageThumbnails: true,
            autoProcessQueue: true,
            addRemoveLinks: true,
        })

        dropzone.on('sending', (file, xhr, formData) => {
            if (this.hasParamsValue) {
                let keys = Object.keys(this.paramsValue)
                keys.forEach(key => {
                    formData.append(key, this.paramsValue[key])
                })
            }
            formData.append('uuid', file.upload.uuid)
            formData.append('originalFilename', file.name)
            window.dispatchEvent(new CustomEvent('dropzone:uploading'))
        })

        dropzone.on('queuecomplete', () => {
            window.dispatchEvent(new CustomEvent('dropzone:complete'))
        })

        dropzone.on('removedfile', (file) => {
            fetch(`${this.endpointDeleteValue}?uuid=${file.upload.uuid}`, { method: 'delete', credentials: 'include' })
        })
    }
}