import Snap from 'snapsvg'

import ShapeResizer from './shape-resizer'

import { eventEmitter } from '../utils'

import SnapsvgZoom from './snapsvg-zoom'

/* custom plugins */

Snap.plugin(function (Snap, Element, Paper, glob) {

	var elproto = Element.prototype;

	elproto.toBack = function () {

		this.prependTo(this.paper);

	};

	elproto.toFront = function () {

		this.appendTo(this.paper);

	};

});

Element.prototype.getTransformedXY = function( x, y ) {

            var m = this.transform().globalMatrix;

            return { x: m.x(x,y), y: m.y(x,y) };             

    };

var paper = null;

var mainImage = null;

var pointData = [];

var viewBoxBounds = {X: 100, Y:100};

var zoomFactor = {x:1, y:1};

var viewPort= {width:850, height:850};

var currentViewBox = []; 

var config = null;

var readOnly = false;

var startPoint = null;

var drawing_path = null;

var drawing_paths = [];

var canDraw = false;

var rectZone = null;

var PATH_COLOR = "#ff00ff";

var STROKE_COLOR = "red";

var FILL_COLOR = "orange";

var SELECTED_COLOR = "#ffff00";

var FIRST_NODE_COLOR = "#FF0000";

var HANDLE_SIZE = 8;

var isDragged = false;

var enablePoint = true;

var pathIsClosed = false;

var ENABLE_NEW_NODE = true;

var RECT_MODE ='RECT';

var drawingMode = RECT_MODE; //free

var FREE_MODE = 'FREE';

var availableModes = [RECT_MODE, FREE_MODE];

var onChangeCallback = null;

var getId = (function () {

		var cpt = 0;

		var defautPrefix = "item_"; 

		return function (prefix) {

			prefix = (typeof prefix === 'string') ? prefix : defautPrefix;

			cpt = cpt + 1;

			return prefix + cpt; 

		}

	}());

var handleRectPath = function (path) {

	if (readOnly) {

		paper.path(path).attr({ stroke:'red', opacity: 0.6});

		return;

	}

	var bbBox = Snap.path.getBBox(path);

	rectZone = paper.rect(bbBox.x, bbBox.y, bbBox.width, bbBox.height);

	rectZone.attr({fill: FILL_COLOR, stroke: STROKE_COLOR, opacity: 0.6});

	drawing_path = rectZone;

	canDraw = false;

	pathIsClosed = true;

	ShapeResizer.enable_resizer(paper, drawing_path, viewPort, currentViewBox);

};

var handleFreePath = function (path) {

	if (readOnly) {

		paper.path(path).attr({

			stroke: 'orange',

			fill: 'orange',

			opacity: 0.5,

		});

		return; 

	}

	var pathInfos = Snap.parsePathString(path);

	pathInfos.map(function (pathData) {

		if(pathData[0] !== 'Z') {

			createPoint(paper, pathData[1], pathData[2], pointData);

		} else {

			pathIsClosed = true;

			updatePath(paper, onClosePath);

		}

	});

	/* replay the path here */

}; 

//transform point to path

var updatePath = function (paper, updateCallback) {

	var path = "M";

	if (pointData.length <= 1) {

		return;

	}

	path += pointData[0].x + ',' + pointData[0].y;

	for (var i=0; i < pointData.length; i++) {

		if (i == 0) continue;

		var pointInfos = pointData[i];

		var lPath = "L" + pointInfos.x + "," + pointInfos.y;

		path += " " + lPath;

	}

	path += (pathIsClosed) ? " Z": "";

	/* remove prev path */

	if (drawing_path) {

		drawing_path.remove();

	}	

	drawing_path = paper.path(path);

	drawing_path.attr({

		stroke: STROKE_COLOR,

		"vector-effect": "non-scaling-stroke",//prevent line to be zoom in

		"stroke-width": 3,

		fill: "white",

		opacity: 0.1

	});

	/* bring all handler to front */

	pointData.map(function (point) {

		/*deal with handler size */

		var handleSize = computeHandleSize();

		if (point.handler) {

			point.handler.toFront();

		}

	});

	if (typeof updateCallback === 'function' && pathIsClosed) {

		updateCallback();

	}

	if (!updateCallback && pathIsClosed) {

		applyClosedStyle();	

	}

};

var applyClosedStyle = function () {

	drawing_path.attr({ fill: FILL_COLOR, strokeWidth: 1, opacity:.6 });

} 

var onClosePath = function () {

	ENABLE_NEW_NODE = false;

	applyClosedStyle();

};

var onClickOnHandler = function (point, p, e) {

	//close path

	if (point.isFirst && pointData.length > 2) {

		pathIsClosed = true;

	}

};

var updatePointPosition = function (newPoint, x, y) {

	var index = pointData.indexOf(newPoint);

	if (index !== -1) {

		pointData[index].x = x;

		pointData[index].y = y; 

		return true;

	} else {

		return false;

	}

};

var clearPreviousPath = function () {

	drawing_path.remove();

};

var computeHandleSize = function () {

	if(!currentViewBox.length) {

		currentViewBox = [0, 0, parseInt(mainImage.width()), parseInt(mainImage.height())]

	}

	var currentHandleSize = HANDLE_SIZE * Math.min(currentViewBox[2], currentViewBox[3]) / 850; 

	return currentHandleSize;

}

var onMoveHandler = function (dx, dy, posX, posY, e) {

	isDragged = true;

	var tdx, tdy;

    var snapInvMatrix = this.transform().diffMatrix.invert();

    snapInvMatrix.e = snapInvMatrix.f = 0;

    tdx = snapInvMatrix.x( dx,dy ); 

    tdy = snapInvMatrix.y( dx,dy );

	var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy];

	this.attr({ transform: transformValue});

	var boxSize = this.getBBox();

	var wasUpdated = updatePointPosition(this.data('point'), boxSize.x + (computeHandleSize() / 2) , boxSize.y + (computeHandleSize() / 2));

	if (wasUpdated) {

		updatePath(this.paper);

	}

}

var bindHandlerEvent = function (point, p) {

	point.handler.click(onClickOnHandler.bind(this, point, p));

	/* -- handler -- */

	point.handler.hover(function () {

		point.handler.attr({fill: 'yellow'});

	}, function () {

		var fillColor = point.isFirst ? FIRST_NODE_COLOR : "";

		point.handler.attr({fill: fillColor});

	});

	point.handler.drag(onMoveHandler, function () {

        this.data('origTransform', this.transform().local );

	}, function () {

		if (!isDragged) { return true; }

		isDragged = false;

		enablePoint = false;

	});

}

var createPointHandler = function (p, point) {

	var handler;

	var handleSize = computeHandleSize();

	var handleX = point.x - handleSize / 2;

	var handleY = point.y - handleSize / 2;

	/* preserve initial size of 5px a quoi correspond 5 deal with current vp */

	handler = p.rect(handleX, handleY, handleSize, handleSize);

	handler.addClass("drawingHandler");

	point.handler = handler;

	point.handler.data('point', point);

	if (pointData.length === 0) {

		point.isFirst = true;

	}

	bindHandlerEvent(point, p);

	point.handler.attr({

		fill: (pointData.length === 0) ? FIRST_NODE_COLOR : "",

		opacity: 0.9,

		stroke: PATH_COLOR

	});

	return point;

}

//create paper

var createPoint = function (paper, x, y, pointData) {

	var point = {x:x, y:y, id: getId()};

	if (pathIsClosed) {

		updatePath(paper, onClosePath);

		return;

	}

	if (!enablePoint) {

		enablePoint = true;

		return false;

	}

	point = createPointHandler(paper, point);

	pointData.push(point);

	updatePath(paper);

};

var attachRectEvents = function (paper) {

	if (readOnly) { return false; }

	var startPosition = {};

	var currentPosition = {};

	/* add resizer */

	paper.mousedown(function (e) {

		if (drawingMode === FREE_MODE || pathIsClosed) { return; }

		var offset = computeOffset(e)

		startPosition.x = offset.x;

		startPosition.y = offset.y;

		canDraw = true;

	});

	paper.mousemove(function (e) {

		if (drawingMode === FREE_MODE) { return; }

		if (!canDraw) { return; }

		var x, y;

		var offset = computeOffset(e)

		currentPosition.x = offset.x;

		currentPosition.y = offset.y;

		if (rectZone) {

			rectZone.remove();

		}

		/* bas -> droite */

		var width = Math.abs(currentPosition.x - startPosition.x);

		var height = Math.abs(startPosition.y - currentPosition.y);

		if (currentPosition.y > startPosition.y && currentPosition.x > startPosition.x) {

			x = startPosition.x;

			y = startPosition.y;	

		}

		/* haut -> droite */

		if (currentPosition.y < startPosition.y && currentPosition.x > startPosition.x) {

			x = currentPosition.x - width;

			y = currentPosition.y; 

		}

		/* haut -> gauche */

		if (currentPosition.y < startPosition.y && currentPosition.x < startPosition.x) {

			x = currentPosition.x;

			y = currentPosition.y;

		}

		/* bas -> gauche */

		if (currentPosition.y > startPosition.y && currentPosition.x < startPosition.x) {