import { submitValueDebounced } from './submit_value.js'

export default function initAcrosticQuestions() {
    document.querySelectorAll('[data-behaviour="question_acrostic"]').forEach((acrostic) => {
        const submitUrl = acrostic.dataset.submitUrl
        const _submit = submitValueDebounced()

        const allInputs = Array.from(acrostic.querySelectorAll(".acrostic-input"))

        function submit() {
            const data = allInputs.map((input) => input.value)
            _submit(submitUrl, {data})
        }

        allInputs.forEach((input) => {
            const index = Number.parseInt(input.dataset.index)
            const previous = acrostic.querySelector(`.acrostic-input[data-index="${index - 1}"]`)
            const next = acrostic.querySelector(`.acrostic-input[data-index="${index + 1}"]`)
            input.addEventListener('input', (event) => {
                if (event.data) {
                    input.value = event.data[0]
                }
                submit()
                if (event.data) {
                    if (next) {
                        next.focus()
                    }
                } else {
                    if (previous) {
                        previous.focus()
                    }
                }
            })
            input.addEventListener('focus', () => {
                input.select()
            })
        })
    })
}