export default class SvgMapUI {
    constructor(host) {
        this.host = host
        this.scale = 1
        this.pos = { x: 0, y: 0 }
        console.log(host)
        this.host.onwheel = this.handle_wheel.bind(this)
        this.host.onmousedown = this.handle_mousedown.bind(this)
        this.host.onmousemove = this.handle_mousemove.bind(this)
        this.host.onmouseup = this.handle_mouseup.bind(this)

        this.is_down = false

        this.set_scale(1)
    }


    set(html){
        this.host.innerHTML = html
    }

    handle_mousedown(event) {
        this.is_down = true
        this.downin = { x: event.clientX, y: event.clientY }
        console.log(event)
        // clientX: 451, clientY: 297
        // layerX: 451, layerY: 297
    }

    handle_mousemove(event) {
        if (this.is_down) {
            event.preventDefault()
            let dx = event.clientX - this.downin.x
            let dy = event.clientY - this.downin.y

            this.pos.x -= dx * this.scale
            this.pos.y -= dy * this.scale
            this.set_scale(this.scale)
            this.downin = { x: event.clientX, y: event.clientY }
            // this.downin = {x: event.clientX, y: event.clientY}
        }
        // console.log(event.x, event.clientX + this.pos.x, this.scale)
    }

    handle_mouseup(event) {
        this.is_down = false
    }


    handle_wheel(event) {
        event.preventDefault()

        if (event.ctrlKey) {
            if (event.deltaY > 0) {
                this.scale_up()
            }
            else
                this.scale_down()
        }

        else if (event.shiftKey) {
            console.log('shifted')
        }

        else {

        }

        console.log(event)
    }

    set_scale(scale) {
        this.scale = scale
        if (!this.host.childNodes.length) return;        
        this.host.childNodes[0].setAttribute("viewBox", `${this.pos.x} ${this.pos.y} ${2000 * this.scale} ${2000 * this.scale}`)
        // this.host.childNodes[0].setAttribute("width", `1000`)
        // this.host.childNodes[0].setAttribute("height", `1000`)
    }

    scale_up() {
        this.set_scale(this.scale * 1.1)
    }

    scale_down() {
        this.set_scale(this.scale * 0.9)
    }
}