var bricks = window.bricks || {};
bricks.Svg = class extends bricks.VBox {
	/*
	options:{
		rate:
		url:
		color:*
		blinkcolor:*
		blinktime:*
	}
	*/
	constructor(opts){
		opts.rate = opts.rate || 1;
		opts.cwidth = opts.cwidth || 1;
		opts.cheight = opts.cheight || 1;
		opts.blinktime = opts.blinktime || 0.2;
		opts.dynsize = true;
		super(opts);
		if (opts.url){
			this.set_url(opts.url);
		}
	}
	set_url(url){
		fetch(url)
			.then(response => response.text())
			.then(svgText => {
				this.svgText = svgText;
				this.set_colored_svg(this.color);
				this.blink();
			});
	}
	set_ancent_color(e){
		var pstyle = getComputedStyle(this.parent);
		this.set_color(pstyle.color);
	}
	set_color(color){
		this.color = color;
		this.set_colored_svg(color);
	}
	set_blinkcolor(color){
		this.blinkcolor = color;
		this.blinktime = this.blinktime || 0.5;
	}
	set_colored_svg(color){
		this.cur_color = color;
		var svgText = bricks.obj_fmtstr({color: color}, this.svgText);
		this.dom_element.innerHTML = svgText;
	}
	blink(){
		if (this.blinktime && this.blinkcolor) {
			if (this.cur_color == this.color){
				this.set_colored_svg(this.blinkcolor);
			} else {
				this.set_colored_svg(this.color);
			}
			this.blink_task = schedule_once(this.blink.bind(this), 
				this.blinktime);
		}
	}
	start_blink(){
		if (!this.blink_task){
			blink();
		}
	}
	end_blink(){
		this.blink_task = null;
	}
}

bricks.Factory.register('Svg', bricks.Svg);

