let progresTotal = 0
  const afficheProgres = (progres) => {
    let cont = document.querySelector('#progresTotal')
    let pro = document.createElement('progress')
    cont.innerHTML = ""
    pro.value = progres * 100
    pro.max = 100
    pro.innerText = `${progres * 100} %`
    cont.appendChild(pro)
  }

  function progressUpdate(packet) {
    const log = document.getElementById('log');
    if (log.firstChild && log.firstChild.status === packet.status) {
      if ('progress' in packet) {
        let progress = log.firstChild.querySelector('progress')
        progress.value = packet.progress
      }
    } else {
      let line = document.createElement('div');
      line.status = packet.status;
      let status = document.createElement('div')
      status.className = 'status'
      status.appendChild(document.createTextNode(packet.status))
      line.appendChild(status)
      if ('progress' in packet) {
        const progress = document.createElement('progress')
        progress.value = packet.progress
        progress.max = 1
        line.appendChild(progress)
      }
      if (packet.status == 'done') {
        const pre = document.createElement('pre')
        pre.appendChild(document.createTextNode(packet.data.text))
        line.innerHTML = ''
        line.appendChild(pre)
      }
      log.insertBefore(line, log.firstChild)
    }
  }
  const recognizeFile = (file, pages = 1) => {
    Tesseract.detect(file).then(res => console.log(res))
    Tesseract.recognize(file, {
        lang: document.querySelector('#langsel').value,
        textord_min_xheight: 8,
        tessedit_dump_pageseg_images: 1,
      })
      .progress(function(packet) {
        // console.log(packet)
        progressUpdate(packet)
      })
      .then(function(data) {
        console.log("Data", data)
        progressUpdate({
          status: 'done',
          data: data
        })
      /*
        data.words.forEach(w => {
          let box = w.bbox
          file.strokeWidth(2)
          file.strokeStyle('red')
          file.strokeRect(box.x0, box.y0, box.x1 - box.x0, box.y1 - box.y0)
          file.beginPath()
          file.moveTo(w.baseline.x0, w.baseline.y0)
          file.lineTo(w.baseline.y0, w.baseline.y1)
          file.strokeStyle = 'green'
          file.stroke()
        })*/
      })
  }
  let refered = new Array()
  document.getElementById("pdf-upload").addEventListener("change", function(e) {
    document.querySelector("#pdfPages").innerHTML = '<h3 class="hidden-print">Aperçu du document</h3>'
    let file = e.target.files[0]
    if (file.type == "image/jpeg" || file.type == "image/tiff") {
      recognizeFile(file)
      return
    }
    if (file.type != "application/pdf") {
      console.error('Incorrect file type', file.type)
      return
    }
    var fileReader = new FileReader();
    fileReader.onload = function() {
      let typedarray = new Uint8Array(this.result);
      pdfjsLib.getDocument(typedarray).then(pdf => {
        // you can now use *pdf* here
        addToDiv("Le fichier contient " + pdf.numPages + " page(s).")
        if (pdf.numPages > 10) throw new Error('La détection des PDF sont limités à 10 pages. Merci de tronquer le document')
        for (let i = 1; i <= pdf.numPages; i++) {
          pdf.getPage(i).then(page => {
            console.log(page)
            let vp = page.getViewport(4)
            let canvas = document.createElement("canvas")
            canvas.id = "pdfPage_" + i
            canvas.height = vp.height
            canvas.width = vp.width
            let ctx = canvas.getContext('2d')
            page.render({
              canvasContext: ctx,
              viewport: vp
            }).then(() => {
              recognizeFile(ctx, pdf.numPages)
            })
            document.querySelector("#pdfPages").appendChild(canvas)
          });
        }
      }).catch(err => {
        if (err) alert(err)
      })
    };
    fileReader.readAsArrayBuffer(file);
  })
  const addToDiv = (content) => {
    document.querySelector("#liste").innerHTML += "<li>" + content + "</li>"
  }