/**
 * Generate previews when glb or gltf files selected
 * for upload
 * 
 * @param {Event} e
 */
checkForGltf = function (e) {
    const fileInfo = e.target.files[0]
    if (fileInfo.name.match(/(.gl(?:b|(?:tf))$)/) && fileInfo.type == 'model/gltf-binary') {
        const mvPreview = document.createElement('model-viewer')
        mvPreview.style['width'] = '180px'
        mvPreview.style['height'] = '180px'

        const dThumbCap = document.createElement('div')
        dThumbCap.classList.add('thumbcaption')

        const dThumbName = document.createElement('div')
        dThumbName.classList.add('filename')
        dThumbName.innerHTML = fileInfo.name

        const dThumbInfo = document.createElement('div')
        dThumbInfo.classList.add('fileinfo')
        dThumbInfo.innerHTML = (fileInfo.size / 1024 / 1024).toFixed(1) + 'MB'

        dThumbCap.appendChild(dThumbName)
        dThumbCap.appendChild(dThumbInfo)

        const dThumbIn = document.createElement('div')
        dThumbIn.classList.add('thumbinner')
        dThumbIn.appendChild(mvPreview)
        dThumbIn.appendChild(dThumbCap)

        const dThumb = document.createElement('div')
        dThumb.id = 'glmv-upload-thumbnail'
        dThumb.classList.add('thumb', 'tright')
        dThumb.appendChild(dThumbIn)

        $('#mw-htmlform-source').before(dThumb)

        const reader = new FileReader()
        reader.addEventListener("load", () => {
            $('model-viewer').attr('src',reader.result)
            $('model-viewer').attr('auto-rotate-delay',3000)
            $('model-viewer')[0].toggleAttribute('auto-rotate')
        },{once: true})
        reader.readAsDataURL(fileInfo)
    } else {
        $('#glmv-upload-thumbnail').remove()
    }
}

$('#wpUploadFile').on('change', checkForGltf)