import { Template } from 'meteor/templating';
import { Tracker } from 'meteor/tracker';
import { Random } from 'meteor/random';

import './template.html';
import './style.styl';

Template.Magnet.viewmodel({
    signal: 'mouse',
    share: ['mouseBagController', 'magnetController'],
    x: 0,
    y: 0,
    collection() {
        return this.doc()
    },
    checkBagForMagnet() {
        let Bag = this.storage()

        let Magnets = this.collection()

        let bagNotEmpty = function() {
            return Bag.length > 0
        }

        let typeNotConnect = function() {
            return _.first(Bag).type !== "connect"
        }

        if (bagNotEmpty() && typeNotConnect()) {
            let obj = Bag.shift();
            return obj;
        }
    },
    clicked: function(e) {

        let magnet = this.checkBagForMagnet()
        if (magnet) {
            //algo for object placement on canvas

            _.extend(magnet, { x: e.clientX + 10, y: e.clientY + 10 });

            this.parent().stuff({obj: magnet})
        }
    },
    stuff(o) {
        this.parent.stuff(o, function(e, r) {
            if (e) {
                throw new Meteor.Error('magnet.stuff', e)
            }
        })
    }
})

// var magnets = new Mongo.Collection(null);
// we moved this to the world object. easier to observe and more elegant.

Template.MagneticObject.viewmodel({
    signal: 'mouse',
    share: ['magnetController'],
    hovering: false,
    touching: false,
    delta: {
        x: 0,
        y: 0
    },
    mousedown: function(e) {
        console.log(e.type);
        //Starts touching object upon mouse down
        this.touching(this.object(e));
    },
    object: function(e) {
        if (e) {
            return {
                x: e.pageX,
                y: e.pageY
            }
        }
    },
    magnetType() {
        if (this.type() == 'textbox') {
            return 'button'
        } else {
            return 'direct'
        }
    },
    stuff(obj) {
        this.parent().stuff({ _id: this._id(), obj: obj }, function(err, r) {
            if (err) {
                throw new Meteor.Error('magneticObject.stuff', err)
            }
        })
    },
    dragging: function() {
        //Starts dragging
        //While touching happens
        //Runs on move pointer
        if (this.touching()) {
            let mp = this.mp()
            this.delta().x = mp.pageX - this.touching().x;
            this.delta().y = mp.pageY - this.touching().y;

            console.log("magneticObject.dragging" + " horz " + this.delta()
                .x + "px, vert " + this.delta().y + "px");

            //change to stuff using parent method and {x, y}
            this.x(this.x() + this.delta().x)
            this.y(this.y() + this.delta().y)

            this.touching(this.object(mp));
            this.stuff({ y: this.y(), x: this.x() })
        }
    },
    autorun: [
        function() {
            //Runs on every move pointer event,
            //stuffs dragging position

            this.mp()

            //Tracker.nonreactive prevents infinite loop & stack lock, ups the property in unreactive bubble

            Tracker.nonreactive(() => { this.dragging(); });
        },
        function() {
            //Runs on every mouse up event
            //When mouse up is true
            //Stops touching object
            let mouseup = this.mu();

            //Tracker.nonreactive prevents infinite loop & stack lock, ups the property in unreactive bubble

            Tracker.nonreactive(() => {
                if (this.touching()) {
                    this.touching.reset();
                    //this.delta.reset();
                }
            });

        }
    ]
})