const FORM = document.getElementById("cutter-form")
const BUTTON = document.getElementById("download")
const IMAGE = new Image()
let rowCount
let maxCount

FORM.addEventListener("submit", e => {
        e.preventDefault()
        const data = new FormData(FORM)
        IMAGE.src = URL.createObjectURL(data.get('image'))
        rowCount = data.get('rows')
        console.log('ça marche :', data)
    })

IMAGE.addEventListener('load', e => {
    document.getElementById('cutter-panel').replaceChildren()
    for(let i = 0; i<rowCount; i++){
        for (let j = 0; j<3; j++){
            let e = document.createElement('canvas')
            e.width = 1080
            e.height = 1350
            let context = e.getContext('2d')
            context.fillStyle = 'black'
            context.drawImage(IMAGE,
                j*(1080*0.94), i*1350,
                1080*0.94, 1350,
                1080*0.03, 0,
                1080*0.94, 1350
            )
            document.getElementById('cutter-panel').append(e)
        }
    }
})

BUTTON.addEventListener('click', e => {
    let imgList = document.querySelectorAll('canvas')
    maxCount = imgList.length
    for (let [i, img] of imgList.entries()){
        img.toBlob(b => {
            let aEl = document.createElement('a')
            let index = maxCount - i
            aEl.href = URL.createObjectURL(b)
            aEl.download = 'img-' + index + '.jpg'
            aEl.click()
        },'image/jpeg',1)
    }
})