'use strict'

//import {
    //config
//} from './config.js'

const Interactor = function() {
    // private
    let artboard;
    let canvas;
    let content;

    let mouse = {};

    const resetMouse = () => {
        mouse.isDown = false;
        mouse.isDragging = false;
        content.style.cursor = 'grab';
    }

    const moveArtboard = (x, y, relative = true) => {
        tp.studio.transaction(({
            set
        }) => {
            if (relative) {
                set(artboard.theatreObject.props.x, artboard.theatreObject.value.x + x);
                set(artboard.theatreObject.props.y, artboard.theatreObject.value.y + y);
            } else {
                set(artboard.theatreObject.props.x, x);
                set(artboard.theatreObject.props.y, y);
            }
        });
    };

    const zoomArtboard = (zoom) => {
        zoom = Math.max(config.artboard.minimumZoom, zoom);
        zoom = Math.min(config.artboard.maximumZoom, zoom);
        tp.studio.transaction(({
            set
        }) => {
            set(artboard.theatreObject.props.zoom, zoom);
        });
    };

    const registerEvents = () => {
        content.addEventListener('mousedown', (event) => {
            event.preventDefault();
            event.cancelBubble = true;
            mouse.isDown = true;
        });
        // the mouse might move out of the content while moving it
        // also, we don't capture the mouse. you will have to simply
        // drag multiple times if you want to drag very far
        document.addEventListener('mousemove', (event) => {
            if (mouse.isDown) {
                mouse.isDragging = true;
                content.style.cursor = 'grabbing';
                // for some reason we need to multiply the mouve movement by 0.5
                // no idea why. but this is consistent across browsers, so we might
                // just leave this here and investigate whenever we have a problem
                const factor = 0.5;
                moveArtboard(event.movementX * factor, event.movementY * factor); 
                event.preventDefault();
                event.cancelBubble = true;
            }
        });
        document.addEventListener('mouseup', (event) => {
            if (mouse.isDown) {
                event.preventDefault();
                event.cancelBubble = true;
                resetMouse();
            }
        });
        content.addEventListener('wheel', (event) => {
            const currentZoom = artboard.theatreObject.value.zoom;
            const zoomFactor = config.interactor.zoomBaseFactor
                                * Math.min(config.interactor.zoomDynamicMax, currentZoom);
            let zoom = currentZoom + (event.deltaY * zoomFactor);
            zoom = Math.min(config.artboard.maximumZoom, Math.max(config.artboard.minimumZoom, zoom));
            zoomArtboard(zoom);
            const dpiRatio = 1.0; //window.devicePixelRatio ? window.devicePixelRatio : 1.0;
            const currentX = artboard.theatreObject.value.x * dpiRatio;
            const currentY = artboard.theatreObject.value.y * dpiRatio;
            const currentW = artboard.theatreObject.value.width * dpiRatio;
            const currentH = artboard.theatreObject.value.height * dpiRatio;
            const relativeX = (((currentX * -1) + (event.clientX * dpiRatio)) / currentZoom) / currentW;
            const newX = -1 * ((relativeX * currentW * zoom) - event.clientX * dpiRatio);
            const relativeY = (((currentY * -1) + (event.clientY * dpiRatio)) / currentZoom) / currentH;
            const newY = -1 * ((relativeY * currentH * zoom) - event.clientY * dpiRatio);
            const x = newX;
            const y = newY;
            moveArtboard(x, y, false);
        });
    };
    // public
    this.init = () => {
        artboard = window.getArtboard();
        canvas = document.querySelector('canvas.emscripten');
        content = document.querySelector('#content');
        resetMouse();
        registerEvents();
    };
};

export {
    Interactor
};