<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());
			this.showEditor();
			this.drawingComponent.createTestHandler(10,20, 50);
		},

		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.formView = true;
				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>