<script>

	import svgboard from './svgboard'

	import Typeahead from '../typeahead/Typeahead.vue'

	import Zoomview from '../zoomview/Zoomview.vue'

	export default {

		el: '#drawing-zone',

		MODE_RECT: 'RECT',

		MODE_FREE: 'FREE',

		ZOOM_IN: 'in',

		ZOOM_OUT: 'out',

		components: {typeahead: Typeahead, zoomview: Zoomview},

		data: { 

			mode:"",

			isRect: true,

			normalizePath: "",

			readOnly: false,

			formView: true,

			useClipPath: false,

			transformMatrix: "",

			fragmentPath: "",

			canZoom: true,

			displayMask: false

		},

		mounted () {

			var self = this;

			this.initialDrawingMode = null;

			this.drawingComponent = svgboard.init({ 

				wrapperId: '#iconolab-image-wrapper',

					actionWrapper: '#action-wrapper',

					readOnly: false,

					onDrawingModeChange: function (mode) {

						self.setDrawingMode(mode, false);

					}

			});

			this.$refs.zoomview.setZoomTarget(this.drawingComponent.getPaper());

		},

		methods: {

			computeCentreredViewBox: function () {

				var zoomSvg = this.$refs.zoomSvg;

				var viewBox = [];

				var imageWidth = zoomSvg.getAttribute("width"); 

				var imageHeight = zoomSvg.getAttribute("height");

				/* normalize */

				var xRatio = imageWidth / 100 ;

				var yRatio = imageHeight / 100;

				var zTarget = this.drawingComponent.getShapeBBox(); 

				viewBox = [(zTarget.x - 1) * xRatio, (zTarget.y - 1) * yRatio, (zTarget.w + 2) * xRatio, (zTarget.h + 2) * yRatio];

				return viewBox.join(" ");

			},

			computeZoomedViewBox: function () {

				var viewBoxArray = [];

				var zoomSvg = this.$refs.zoomSvg;

				var shapeBBox = this.drawingComponent.getShapeBBox();

				var imageWidth = zoomSvg.getAttribute("width");

				var imageHeight = zoomSvg.getAttribute("height");

				var xRatio = imageWidth / 100;

				var yRatio = imageHeight / 100;

				/* denormalize coordonate, max is imageX * 100x = imageHeigth*/

				shapeBBox.x = shapeBBox.x * xRatio;

				shapeBBox.y = shapeBBox.y * yRatio;

				shapeBBox.w = shapeBBox.w * xRatio;

				shapeBBox.h = shapeBBox.h * yRatio;

	        	var imgRatio = imageWidth / imageHeight;

		        if (shapeBBox.w > shapeBBox.h) {

		            shapeBBox.y = Math.max(0, shapeBBox.y - (((shapeBBox.w * imgRatio) - shapeBBox.h) / 2));

		            shapeBBox.h = shapeBBox.w * imgRatio;

		        }

		       	else {

		       		shapeBBox.x = Math.max(0, shapeBBox.x - (((shapeBBox.h / imgRatio) - shapeBBox.w) / 2));

		            shapeBBox.w = shapeBBox.h / imgRatio;

		       	}

		       	viewBoxArray = [shapeBBox.x, shapeBBox.y, shapeBBox.w, shapeBBox.h];

				if (!shapeBBox) { return false; }

				return viewBoxArray.join(" ");

			},

			zoom: function (direction) {

				var mainSvgWrapper = this.$refs.smallSvgWrapper;

				if (this.$options.ZOOM_OUT === direction) {

					var defaultViewBox = [0, 0, mainSvgWrapper.getAttribute("width"), mainSvgWrapper.getAttribute("height")];

					mainSvgWrapper.setAttribute("viewBox", defaultViewBox.join(" "));

					this.canZoom = true;

				}

				if (this.$options.ZOOM_IN === direction) { 

					mainSvgWrapper.setAttribute("viewBox", this.computeCentreredViewBox());//this.computeZoomedViewBox());//

					this.canZoom = false; 

				}

			},

			setDrawingMode: function (mode, updateComponent) {

				if (!this.initialDrawingMode) {

					this.initialDrawingMode = mode;//useful for cancel

				}

				var updateComponent = (typeof updateComponent === "boolean") ? updateComponent: true;

				this.mode = this.$options['MODE_' + mode];

				this.isRect = (this.mode === this.$options.MODE_RECT) ? true: false;

				if (updateComponent) {

					this.drawingComponent.setDrawingMode(this.mode);

				}

			},

			cancel: function () {

				this.formView = true;

				var currentPath = this.$refs.currentPath.getAttribute("d");

				if (!currentPath.length || !this.initialDrawingMode) { return; } {

					currentPath += ";" + this.initialDrawingMode; 

					this.drawingComponent.setPath(currentPath);

				}

			},

			highLightZone: function () {

				if (!this.displayMask) {

					this.displayMask = true;

				}

				else {

					this.displayMask = false;

				}

			},

			displayEditedPath: function () {

				var normalizePath = this.drawingComponent.getPath();

			},

			resetZoom: function () {

				this.zoom(this.$options.ZOOM_OUT);

			},

			showEditor: function () {

				this.resetZoom();

				/* on edit mode reset*/

			},

			showForm: function () {

				this.normalizePath = this.drawingComponent.getPath();

				var smallImage = this.$refs.smallImage;

				this.formView = true;

				var xRatio = smallImage.getAttribute("width") / 100;

				var yRatio = smallImage.getAttribute("height") / 100;

				var transformMatrix = [xRatio, 0, 0, yRatio, 0, 0].join(',');

				this.transformMatrix ="matrix(" + transformMatrix + ")";

				this.fragmentPath = this.normalizePath.split(';')[0];

			},

			clear: function () {

				this.drawingComponent.clear();

			}

		}

	}

</script>