import {Controller} from '@hotwired/stimulus'

export default class extends Controller {

    static targets = ['field', 'display', 'buttonInc', 'buttonDec']

    static values = {
        current: Number,
        min: Number,
        max: Number
    }

    connect() {
        this.currentValue = parseInt(this.fieldTarget.value) || 0
        this.updateForm()
    }

    increase() {
        if (null !== this.maxValue && this.currentValue >= this.maxValue) {
            return
        }
        this.currentValue = this.currentValue + 1
        this.updateForm()
    }

    decrease() {
        if (null !== this.minValue && this.currentValue <= this.minValue) {
            return
        }
        this.currentValue = this.currentValue - 1
        this.updateForm()
    }

    updateForm() {
        this.displayTarget.innerText = this.currentValue
        this.fieldTarget.value = this.currentValue

        this.buttonIncTarget.disabled = null !== this.maxValue && this.currentValue >= this.maxValue
        this.buttonDecTarget.disabled = null !== this.minValue && this.currentValue <= this.minValue

        // Trigger change event to fire HTMX request
        this.fieldTarget.dispatchEvent(new Event('change', {bubbles: true}))
    }
}