import { Controller } from '@hotwired/stimulus'

// Submits the host <form> a short beat after a control inside it changes,
// coalescing a burst — rapid slider nudges, or holding an arrow key on a range
// input — into a single submit. Wire it on the <form>:
//
//   <form data-controller="auto-submit"
//         data-action="change->auto-submit#submit range-slider:change->auto-submit#submit"
//         data-auto-submit-delay-value="300">   (delay optional, ms)
//
// `change` covers native inputs (checkbox, select); the range slider emits its
// own `range-slider:change` on commit. Uses requestSubmit() (not submit()) so a
// <turbo-frame> around the form still captures the navigation and validation runs.
export default class extends Controller {
    static values = { delay: { type: Number, default: 300 } }

    submit() {
        clearTimeout(this.#timer)
        this.#timer = setTimeout(() => this.element.requestSubmit(), this.delayValue)
    }

    disconnect() {
        clearTimeout(this.#timer)
    }

    #timer
}