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

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

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

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

        allInputs.forEach((input) => {
            const index = Number.parseInt(input.dataset.index)
            input.addEventListener('input', () => submit())
            input.addEventListener('change', () => submit())
        })
    })
}