import { Controller } from '@hotwired/stimulus'
import { useFetch } from '../mixins/use_fetch'

export default class extends Controller {

    static targets = [ 'form', 'container', 'spinner' ]
    static values = { url: String, loading: Boolean }

    connect() {
        useFetch(this)
    }

    update() {
        this.loadingValue = true
        const formData = new FormData(this.formTarget)
        fetch(this.urlValue, { method: 'POST', body: formData })
            .then(this.checkStatus)
            .then(this.parseHTML)
            .then(response => {
                this.containerTarget.innerHTML = response
            })
            .catch(error => {
            })
            .finally(() => {
                this.loadingValue = false
            })

    }

    loadingValueChanged(loading) {
        if (this.hasSpinnerTarget) {
            this.spinnerTarget.classList.toggle('hidden', false === loading)
        }
    }
}