// filedropzone_controller.js

import { Controller } from '@hotwired/stimulus';
import axios from 'axios';

export default class extends Controller {
    connect() {
        this.element.addEventListener('dropzone:connect', this._onConnect);
        this.element.addEventListener('dropzone:change', this._onChange);
        this.element.addEventListener('dropzone:clear', this._onClear);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side-effects
        this.element.removeEventListener('dropzone:connect', this._onConnect);
        this.element.removeEventListener('dropzone:change', this._onChange);
        this.element.removeEventListener('dropzone:clear', this._onClear);
    }

    _onConnect(event) {
        // The dropzone was just created
        console.info('onconnect');
    }

    _onChange(event) {
        // The dropzone just changed
        console.info('onchange');
        axios.post(document.URL, new FormData(event.target.closest('form')), {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(() => {
            event.target.querySelector('.dropzone-preview-button').click();
            window.EventBus.$emit('fileUploaded');
        })
    }

    _onClear(event) {
        // The dropzone has just been cleared
        console.info('onclear');
    }
}