addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById("canvas")
  const ctx = canvas.getContext("2d")
  ctx.fillStyle = "black"

  const options = {
    mask: document.getElementById("mask-expr"),
    size: document.getElementById("width"),
    ver: document.getElementById("version"),
  }

  document.getElementById("gen-btn").addEventListener("click", () => {
    const mask = options.mask.value
    const size = options.size.value
    const scale = 40

    canvas.width = canvas.height = size * scale

    for (let row = 0; row < size; row++) {
      for (let col = 0; col < size; col++) {
        if (eval(mask) == 0) {
          ctx.fillRect(col * scale, row * scale, scale, scale)
        }
      }
    }
  })

  { // Choose best scale for screen height
    const height = document.documentElement.clientHeight;
    const padding = getComputedStyle(document.body).paddingTop;
    // TODO
  }

  { // QR version related stuff
    const MICRO_4 = 17 // size for version M4, before version 1
    const DIFF = 4 // difference between versions
    const MIN_VER = 1
    const MAX_VER = 40

    const getCodeVersion = () => {
      const size = options.size.value
      return Math.floor((size - MICRO_4) / DIFF)
    }

    const updateSizeVersion = (versionStep) => {
      const ver = getCodeVersion() + versionStep
      if (ver > MAX_VER || ver < MIN_VER) {
        return
      }
      options.size.value = ver * DIFF + MICRO_4
      options.ver.innerText = ver
    }

    document.getElementById("width-incr").addEventListener("click", () => {
      updateSizeVersion(+1)
    })

    document.getElementById("width-decr").addEventListener("click", () => {
      updateSizeVersion(-1)
    })

    options.size.addEventListener("input", () => {
      options.ver.innerText = getCodeVersion()
    })
  }
})