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

export default function initImageQuestions() {
    document.querySelectorAll('[data-behaviour="question_image_input"]').forEach((input) => {
        const submitUrl = input.dataset.submitUrl

        input.addEventListener('change', () => {
            const file = input.files[0];
            const fileReader = new FileReader();
            fileReader.onload = (ev) => {
                submitValue(submitUrl, {
                    filename: file.name,
                    mimetype: file.type,
                    data: ev.target.result.replace(/^data:[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+\/[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+;base64,/, ""),
                })
            }
            fileReader.readAsDataURL(file);
            const preview = document.querySelector(`#${input.id}_preview`)
            while (preview.firstChild) {
                preview.removeChild(preview.firstChild)
            }
            const previewImage = document.createElement("img")
            previewImage.src = URL.createObjectURL(file)
            previewImage.alt = previewImage.title = file.name
            preview.appendChild(previewImage)
        })
    })
}