import { Flywheel } from "./effects.js";
import { getPathShapeBetweenPoints } from "./svg.js";

export function init(svgEl, crosshairXEl, crosshairYEl) {
    let flywheel = new Flywheel();

    // canvas position relative to mouse/screen
    // TODO: update on resize:
    svgEl.setAttribute('viewBox', '0 0 ' + window.innerWidth + ' ' + window.innerHeight);
    let rect = svgEl.getBoundingClientRect();

    // move crosshairs
    window.addEventListener('mousemove', function (mousemoveEv) {
        let x = mousemoveEv.clientX - rect.left;
        let y = mousemoveEv.clientY - rect.top;

        crosshairXEl.setAttribute('x1', x)
        crosshairXEl.setAttribute('x2', x)
        crosshairYEl.setAttribute('y1', y)
        crosshairYEl.setAttribute('y2', y)
    });

    svgEl.addEventListener('mousedown', function (mousedownEv) {
        // create shape to draw
        let shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        shapeEl.classList.add('rect');
        let p1 = { 'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top }
        let corners = flywheel.effects.shape.getAngles();
        let d = getPathShapeBetweenPoints(p1, p1, corners);
        svgEl.appendChild(shapeEl);
        shapeEl.setAttribute('d', d);

        let mouseMoveEv = function (mousemoveEv) {
            let p2 = { 'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top }
            let d = getPathShapeBetweenPoints(p1, p2, corners);
            shapeEl.setAttribute('d', d);
        };
        let mouseUpEv = function () {
            console.log('up');
            window.removeEventListener('mousemove', mouseMoveEv); // remove itself.
            window.removeEventListener('mouseup', mouseUpEv); // remove itself.
            shapeEl.classList.add('locked');
            //TODO: calculate points
            flywheel.add();

            setTimeout(function () {
                shapeEl.classList.add('hide');
                setTimeout(function () {
                    shapeEl.parentNode.removeChild(shapeEl);
                }, 1000);
            }, 1000);
        };
        window.addEventListener('mousemove', mouseMoveEv);
        window.addEventListener('mouseup', mouseUpEv);
    })
}