'use strict';
/* globals $, fabric */

var config = require('./config');
var util = require('./util');

var DragHandle = function (handler) {
    var _currentAxis;
    var _dragHandle;
    var _movedHandle;

    // Event declarations
    var events = {
        mouseDown: function () {
            _dragHandle = true;

            _currentAxis = this.axis;
            handler.canvas.getImage().trigger('mousedown');
        },
        mouseUp: function () {
            if (!_dragHandle) {
                return;
            }

            if (!_movedHandle) {
                $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
            }

            _dragHandle = false;
            _movedHandle = false;
            _currentAxis = null;
            util.MouseMetrics.deletePreviousMouseData();
            handler.canvas.getImage().trigger('mouseup');
        },
        mouseMove: function (e) {
            if (!_dragHandle) {
                return;
            }

            //Android devices have different structure of TouchEvent so e.e.touches[0] element uses in this case
            var pageX = (typeof e.e.pageX !== 'undefined' ? e.e.pageX : e.e.touches[0].pageX);
            var pageY = (typeof e.e.pageY !== 'undefined' ? e.e.pageY : e.e.touches[0].pageY);

            // We're using a polyfill to calculate moude/touch movement if the browser/device
            // does not support movementX/movementY.
            var previousMouseData = util.MouseMetrics.previousMouseData;
            var movement = {
                x: 'movementX' in e.e ? e.e.movementX : (previousMouseData.x ? pageX - previousMouseData.x : 0),
                y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? pageY - previousMouseData.y : 0)
            };
            util.MouseMetrics.setPreviousMouseData({x: pageX, y: pageY});
            _movedHandle = true;

            if (_currentAxis === 'x') {
                handler.canvas.getImage().left -= movement.x;
            } else {
                handler.canvas.getImage().top -= movement.y;
            }
            // Trigger moving for image, to stay within bounds
            handler.canvas.getImage().setCoords().trigger('moving');
            handler.canvas.renderAll();
        }
    };

    function getRect(text, width) {
        var txt = new fabric.Text(text, config.dragHandle.text);
        var rect = new fabric.Rect($.extend({}, config.dragHandle.rect, {
            width: width,
        }));

        return new fabric.Group([rect, txt]).set({
            evented: false,
        });
    }

    this.getCanvas = function () {
        return handler.canvas;
    };

    this.getHandles = function () {
        if (!this.__handles) {
            return [];
        }

        return [].concat(this.__handles.x, this.__handles.y);
    };

    this.setHandlePosition = function() {
        this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
        this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
        return this;
    };

    this.init = function () {
        var viewportData = this.getCanvas().getViewport().getData();
        var tracks = handler.getTracks();

        if (this.__handles) {
            this.getCanvas().remove(this.__handles.x);
            this.getCanvas().remove(this.__handles.y);
        }

        this.__handles = {
            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
        };

        this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
        this.__handles.y.addTo(this.getCanvas())
            .setAngle(-90)
            .centerV().set({ left: tracks.y.left })
            .setCoords();

        this.getCanvas()
            .on('mouse:move', events.mouseMove)
            .on('mouse:up', events.mouseUp);

        tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
        tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
    };
};

module.exports = DragHandle;