import std/dom
import std/strutils
import std/strformat
let canvas = document.getElementById("canvas")
canvas.addEventListener("mousedown", proc(e: Event) =
    let e = cast[MouseEvent](e)

    if e.button != 1:
        return

    canvas.style.cursor = "move"
    canvas.onmousemove = proc(e: Event) =
        let e = cast[MouseEvent](e)
        canvas.scrollTop = e.clientY
)
canvas.addEventListener("mouseup", proc(e: Event) =
    canvas.style.cursor = "auto"
    canvas.onmousemove = nil
)
document.getElementById("button-add-card").onclick = proc(e: Event) =
    var card = document.createElement("div")
    card.className = "card"
    card.innerText = "New card"
    var x_offset, y_offset = 0.0
    let drag = proc(e: Event) =
        let e = cast[MouseEvent](e)

        card.style.left = fmt"{cast[float](e.clientX) - x_offset}px"

        card.style.top = fmt"{cast[float](e.clientY) - y_offset}px"

        echo e.clientX
    card.addEventListener("mousedown", proc(e: Event) =
        let e = cast[MouseEvent](e)

        if e.button != 0:
            return

        let left = if card.style.left != "": parseInt(($(card.style.left))[0..^3]) else: 0
        x_offset = cast[float](e.clientX - left)

        let top = if card.style.top != "": parseInt(($(card.style.top))[0..^3]) else: 0
        y_offset = cast[float](e.clientY - top)

        document.onmousemove = drag
        document.onmouseup = proc(e: Event) = document.onmousemove = nil
    )
    canvas.appendChild(card)
proc example(e: Event) =
    echo "Document is ready"
document.addEventListener("DOMContentLoaded", example)