//https://www.nan.fyi/svg-paths/bezier-curves
//https://ru.freepik.com/vectors/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%B0%D1%8F-%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%BD%D0%B0%D1%8F-%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%87%D0%BA%D0%B0/2#uuid=1037c29f-1473-4cd0-80a4-e839d337832b


function _e(t){console.log(t)};
class AddresObject{
	svg;
	id;
	canvas;
	ctx;
	gridStep = 1;
	fields = {
		base:{
			foreground : '.template-foreground',
			background : '.template-background'
		},
		data:{
			street:'#text-streettype',
			adress:'#text-adress',
			dom:'#text-dom',
			prevdom:'#text-prev-dom',
			nextdom:'#text-next-dom'
		},		
		helpers:{
			street:'#streettype',
			adress:'#adress',
			dom:'#dom',
			prevdom:'#prev-dom',
			nextdom:'#next-dom'
		},
		texts:{
			street:false,
			adress:false,
			dom:false,
			prevdom:false,
			nextdom:false
		}
	};
	
	baseId(key){ 
		return (key)?this.fields.base[key]:this.fields.base;
	}
	dataId(key){ 
		return (key)?this.fields.data[key]:this.fields.data;
	}
	helperId(key){ 
		return (key)?this.fields.helpers[key]:this.fields.helpers;
	}
	
	constructor (svg){
		this.svg = svg;
		this.id = svg.getAttribute('id');
		
		var texts = this.svg.querySelectorAll('text');
		for(let i=0;i<texts.length;i++){
			if(!texts[i].dataset['layer']){				
					texts[i].dataset['layer']='background';				
			}
		}
		this.svg.querySelector(this.baseId('foreground')).classList.remove('fg-color');
		this.svg.querySelector(this.baseId('background')).classList.remove('bg-color');
		//this.initCanvas();
		
	};
	
	initCanvas(){
		this.canvas = document.createElement('canvas');
		this.canvas.id='canvas';		
		this.svg.parentElement.appendChild(this.canvas);
		this.ctx = this.canvas.getContext('2d');
		this.ctx.imageSmoothingEnabled = true;
		this.ctx.imageSmoothingQuality = 'high'; // 'low', 'medium', 'high'		 
		this.drawHelpers();
	}
	drawHelpers(){}
	
	getsvg(){
		return this.svg;
	};
	getNode(target){
		return this.svg.querySelector(target);
	}
	
	setText(key,value){
		value = (value+'').replaceAll(/<(.|\n)*?>/g, '');
		//value = (value).replaceAll(/[^\w\s!?\/\-\.\,]/g,'', '');
		var node = this.getNode(this.dataId(key));
		if(!node)return false;
		var tpath  = node.querySelector('textPath');
		if (tpath) tpath.innerHTML = value;
			else node.innerHTML = value;
	}
	getText(key){
		var node  = this.getNode(this.dataId(key));
		var tpath  = node.querySelector('textPath');
		if (tpath) return tpath.innerHTML;
			else return node.innerHTML;
	}
	setTextSpace(key,value){
		var node = this.getNode(this.dataId(key));
		if (value<0) value = 0;
		node.style['letter-spacing'] = value+'px';
		node.setAttribute('dx', (value/2)+'px');
	}
	
	setFont(font){
		this.svg.dataset['font'] = font;	
		for(var key in this.dataId()){
			var text = this.getNode(this.dataId(key));
			if(text)text.setAttribute('font-family',font);			
		}		
	}
	getFont(){
		var text = this.getNode(this.dataId('adress'));
		if(text)return text.getAttribute('font-family');else return undefined;
	}
	setKey(target,key,val){
		var node = this.getNode(target);
		if(!node)return false;
		node.setAttribute(key,val)
	}
	
	setFillColor(target,color='blue'){		
		this.setKey(target,'fill', color);		
	}
	setBgColor(color){
		this.setFillColor(this.baseId('background'),color);
	}
	setForeColor(color){
		this.setFillColor(this.baseId('foreground'),color);
	}
	
	layerColor(layer, color){
		if (!(layer == 'background' || layer == 'foreground')){
			_e('Error: incorrect layer name');
			return;
		}
		this.setFillColor(this.baseId(layer),color);
		var texts = this.svg.querySelectorAll('text');
		for(let i=0;i<texts.length;i++){
			if(texts[i].dataset['layer']){
				if(texts[i].dataset['layer'] == layer){
					texts[i].setAttribute('fill',color);
				}
			}
		}
	}
	getLayerColor(layer){
		if (!(layer == 'background' || layer == 'foreground')){
			_e('Error: incorrect layer name');
			return;
		}
		var l = this.getNode(this.baseId(layer));
		return l.getAttribute('fill');
	}
	
	swapColors(){
		var newbg = this.getLayerColor('foreground');
		var newfg = this.getLayerColor('background');		
		this.layerColor('background', newbg);
		this.layerColor('foreground', newfg);
		
	}
	align(target,on = true){
		var node = this.getNode(target);
			if(!node)return false;
		if(on){
			node.style['text-anchor']= 'middle';
			node.style['dominant-baseline']= 'middle';
		}else {
			node.style['text-anchor'] = 'unset';
			node.style['dominant-baseline']= 'unset';
		}
	}
	alignText(key, on=true){
		this.align(this.dataId(key),on);
	}
	setTextColor(key, color){
		var node = this.getNode(this.dataId(key));
		node.style.fill = color;
	}
	
	getBoundSize(helper){
		var node = this.getNode(this.helperId(helper));
		if(!node)return false;
		return {
			'x':parseInt(node.getAttribute('x')),
			'y':parseInt(node.getAttribute('y')),
			'width':parseInt(node.getAttribute('width')),
			'height':parseInt(node.getAttribute('height'))
		}
	}
	
	setBoundSize(helper, width, height,on=true){
		var node = this.getNode(this.helperId(helper));
		if(!node)return false;
		node.setAttribute('width',width+'');
		node.setAttribute('height', height+'');
		this.alignHelper(helper,on);
	}
	setHelperBound(helper,rect,on=true){
		var node = this.getNode(this.helperId(helper));
		if(!node)return false;
		node.setAttribute('width',rect.width+'');
		node.setAttribute('height', rect.height+'');
		node.setAttribute('x', rect.x+'');
		node.setAttribute('y', rect.y+'');
		this.alignHelper(helper,on);
	}
	
	alignHelper(helper, on=true){
		
		var node = this.getNode(this.helperId(helper));
		if(!node)return false;
		if(node.dataset['align']=='false')return;
		var b = this.svg.viewBox.baseVal;
		var h = this.getBoundSize(helper);
		var x = ((b.width-h.width)/2);
		node.setAttribute('x',x+'');		
	}
	alignTextToBound(key){
		var helper = this.getNode(this.helperId(key));
		var text = this.getNode(this.dataId(key));
			if(!helper)return false;if(!text)return false;
		var helper_b = this.getBoundSize(key);
		var text_b = text.getBBox();
		var x = helper_b.x+helper_b.width/2;
		var y = helper_b.y+helper_b.height/2;
		text.setAttribute('x',x+'');
		text.setAttribute('y',y+'');
	}			
	
	resizeText(key,on = true){
		var helper = this.getNode(this.helperId(key)),
			text = this.getNode(this.dataId(key));			
			if(!helper)return false;
			if(!text)return false;
			
		var helper_b = this.getBoundSize(key),
			text_b;	
			
		var fontsize=helper_b.height;
			text.setAttribute('font-size',fontsize);		
			text_b = text.getBBox();
		var kw=1;		
		
		if(text.dataset['tracepath']){
			var pathbb = 0;
			pathbb = this.getNode('#'+text.dataset['tracepath']);
			pathbb = pathbb.getBBox().height;		
			var done = false;
			//var iterator=0;
			while(!done){		
				//iterator++;
				helper_b = this.getBoundSize(key);			
				helper_b.height += pathbb;			
				text_b = text.getBBox();
				if(text_b.width>helper_b.width){
					fontsize -= this.gridStep;
					text.setAttribute('font-size',fontsize);
				}else 
					done=true;
				
				if( 3 > fontsize){
					done=true;
					console.error('min '+fontsize+'px');
				}
			};
		}else{
			if(text_b.width>helper_b.width){
				kw = parseFloat(helper_b.width/text_b.width);
				fontsize = parseInt(fontsize*kw);
			}
			text.setAttribute('font-size',fontsize);
		}
	}
	
	resizeTextAll(){
		for(var key in this.dataId()){
			this.resizeText(key);
		}
	}	
}

//end CLASS AddresObject