<template src='./template.html'></template>

<script>

import {eventEmitter, computeElementSize} from '../utils'
import ZoomHandler from '../cutout/snapsvg-zoom'

import Snap from 'snapsvg'

export default {

	props: ['image-url', 'image-width', 'image-height', 'zoomTarget', 'main-image-id'],
	
	mounted () {
		this.root = new Snap(this.$refs['root-svg']);
		this.handler = this.root.select('#zoom-handler');
		this.image = this.root.select('#small-image');
		this.root.attr({width: 101, height: 101});
		var imageWidth = parseInt(this.image.attr("width"));
		var imageHeight = parseInt(this.image.attr("height"));
		/* center image in the viewport */
		this.root.attr({viewBox: [0, 0, imageWidth, imageHeight]});
		this.imgMinSize = Math.min(imageWidth, imageHeight);

		this.handlerSize = 20;
		this.handler.attr({'width': this.handlerSize, 'height': this.handlerSize});
		this.currentViewBox  = null;
		this.currentViewport = null;
		this.updateFunction = null;
		var target = document.getElementById('zoomTarget');

		if (target) {
			this.setZoomTarget(target);
		}
		this.handleEvents();
	},

	data () {
		return {
			showHandler: false
		}
	},
	methods: {
		
		setZoomTarget: function (zoomtarget) {
			
			if (zoomtarget.hasOwnProperty("type") && zoomtarget.type === 'svg') {
				this.paper = zoomtarget; 	
			} else {

				this.paper = new Snap(zoomtarget);
				var mainImage = this.paper.select("#" + this.mainImageId);
				if (!mainImage) { throw new Error("A main image wasn't found."); };
			}

			this.zoomHandler =  ZoomHandler.enable_zoom(this.paper);
		},

		incraseDrawingZoom: function () {
			this.zoomHandler.zoomIn();
		},

		resetDrawingZoom: function () {
			this.zoomHandler.reset();
		},

		decreaseDrawingZoom: function () {
			this.zoomHandler.zoomOut();
		},
		
		handleEvents: function () {
			eventEmitter.on('zoomChanged', this.handleZoomChanged.bind(this));
			var self = this;
			
			this.handler.drag(function (dx, dy) {
				var bbox = this.getBBox();
				var startX = this.data("startPosition").x;
				var startY = this.data("startPosition").y;
				var imageWidth = parseInt(self.image.attr('width'));
				var imageHeight = parseInt(self.image.attr('height'));

				/* New X */
				var newX = startX + dx;
				var newY = startY + dy;
				
				/* XBound */
				if (newX + bbox.w >= imageWidth) {
					newX = imageWidth - bbox.w; 
				}
				/* YBound */
				if (newY + bbox.h >= imageHeight) {
					newY = imageHeight - bbox.h;
				}

				newX = newX < 0 ? 0: newX;
				newY = newY < 0 ? 0: newY;

				var transformedValue = "T" + [newX, newY];
				this.attr("transform", transformedValue);
				self.notifyMove(this.getBBox().x, this.getBBox().y);

			}, function () {
				this.data("startPosition", {x: this.getBBox().x, y: this.getBBox().y});
				this.data("origTransform", this.transform().local);
			}, function () {});
		},

		moveHandlerToCenter: function (x, c) {
			cx = cx ? cx : this.width / 2;
			cy = cy ? cy : this.height / 2;
			var moveX = cx - this.handler.getBBox().w / 2;
			var moveY = cy - this.handler.getBBox().h / 2;
			this.handler.transform( "T" + [moveX, moveY]);
		},
		
		notifyMove: function (x, y) {
			eventEmitter.emit("moveZoomHandler", {
				x: x,
			 	y: y, 
			 viewport: {
			 	width: this.image.attr("width"),
			 	height: this.image.attr("height")
			 }});

			if (!this.currentViewBox || !this.currentViewport || typeof this.updateFunction !== 'function') { return false; }

			/*longueur image=> longueur viewbox */
			var xRatio = this.currentImageSize.width / this.image.attr('width');
			var yRatio = this.currentImageSize.height / this.image.attr('height');
			var newX = x * xRatio;
			var newY = y * yRatio;
			this.currentViewBox[0] = newX;
			this.currentViewBox[1] = newY;
			this.updateFunction(this.currentViewBox);
		},

		handleZoomChanged: function (zoomInfos) {
			
			if (zoomInfos.currentScale === 1) { 
				this.showHandler = false;
				return; 
			}

			this.showHandler = true;

			this.currentViewport = zoomInfos.viewport;
			this.currentViewBox = zoomInfos.currentViewBox;
			this.currentImageSize = zoomInfos.imageSize; 
			this.updateFunction = zoomInfos.updateFunction;
			var handlerSize = zoomInfos.currentViewBox[2] * this.imgMinSize / zoomInfos.minSize;
			
			this.handler.attr("width", handlerSize);
			this.handler.attr("height", handlerSize);

			/*compute handler x, y */
			var x = zoomInfos.currentViewBox[0] * this.image.attr("width") / zoomInfos.imageSize.width;
			var y = zoomInfos.currentViewBox[1] * this.image.attr("height")/ zoomInfos.imageSize.height;
			this.handler.transform( "T" + [x, y]);
		} 
	}
}

</script>