text: import { font } from './font.js'
  import { Theme } from '../theme.js'
  import { utils } from '../utils/utils.js'
  const { style } = utils
  
  function IconButton(size, icon, tooltip, dispatcher) {
  	var iconStyle = {
  		padding: '0.2em 0.4em',
  		margin: '0em',
  		background: 'none',
  		outline: 'none',
  		fontSize: '16px',
  		border: 'none',
  		borderRadius: '0.2em',
  	};
  
  	var button = document.createElement('button');
  	style(button, iconStyle);
  
  	var canvas = document.createElement('canvas');
  	var ctx = canvas.getContext('2d');
  
  	button.appendChild(canvas);
  
  	this.ctx = ctx;
  	this.dom = button;
  	this.canvas = canvas;
  
  	var me = this;
  	this.size = size;
  	var dpr = 1;
  
  	this.resize = function() {
  		dpr = window.devicePixelRatio;
  		var height = size;
  
  		var glyph = font.fonts[icon];
  
  		canvas.height = height * dpr;
  		canvas.style.height = height + 'px';
  
  		var scale = height / font.unitsPerEm;
  		var width = glyph.advanceWidth * scale + 0.5 | 0;
  
  		width += 2;
  		height += 2;
  
  		canvas.width = width * dpr;
  		canvas.style.width = width + 'px';
  
  		ctx.fillStyle = Theme.c;
  		me.draw();
  	};
  
  	if (dispatcher) dispatcher.on('resize', this.resize);
  
  	this.setSize = function(s) {
  		size = s;
  		this.resize();
  	};
  
  	this.setIcon = function(icon) {
  		me.icon = icon;
  
  		if (!font.fonts[icon]) console.warn('Font icon not found!');
  		this.resize();
  	};
  
  	this.onClick = function(e) {
  		button.addEventListener('click', e);
  	};
  
  	var LONG_HOLD_DURATION = 500;
  	var longHoldTimer;
  
  	this.onLongHold = function(f) {
  		// not most elagent but oh wells.
  		function startHold(e) {
  			e.preventDefault();
  			e.stopPropagation();
  			longHoldTimer = setTimeout(function() {
  				if (longHoldTimer) {
  					console.log('LONG HOLD-ED!');
  					f();
  				}
  			}, LONG_HOLD_DURATION);
  		}
  
  		function clearLongHoldTimer() {
  			clearTimeout(longHoldTimer);
  		}
  
  		button.addEventListener('mousedown', startHold);
  		button.addEventListener('touchstart', startHold);
  		button.addEventListener('mouseup', clearLongHoldTimer);
  		button.addEventListener('mouseout', clearLongHoldTimer);
  		button.addEventListener('touchend', clearLongHoldTimer);
  	};
  
  	this.setTip = function(tip) {
  		tooltip = tip;
  	};
  
  	var borders = {
  		border: '1px solid ' + Theme.b,
  		// boxShadow: Theme.b + ' 1px 1px'
  	};
  
  	var no_borders = {
  		border: '1px solid transparent',
  		// boxShadow: 'none'
  	};
  
  	var normal = 'none'; // Theme.b;
  	var up = Theme.c;
  	var down = Theme.b;
  
  	button.style.background = normal;
  	style(button, no_borders);
  
  	button.addEventListener('mouseover', function() {
  		// button.style.background = up;
  		style(button, borders);
  
  		ctx.fillStyle = Theme.d;
  		// me.dropshadow = true;
  		ctx.shadowColor = Theme.b;
  		ctx.shadowBlur = 0.5 * dpr;
  		ctx.shadowOffsetX = 1 * dpr;
  		ctx.shadowOffsetY = 1 * dpr;
  		me.draw();
  
  		if (tooltip && dispatcher) dispatcher.fire('status', 'button: ' + tooltip);
  	});
  
  	button.addEventListener('mousedown', function() {
  		button.style.background = down;
  		// ctx.fillStyle = Theme.b;
  		// me.draw();
  	});
  
  	button.addEventListener('mouseup', function() {
  		// ctx.fillStyle = Theme.d;
  		button.style.background = normal;
  		style(button, borders);
  		// me.draw();
  	});
  
  	button.addEventListener('mouseout', function() {
  		// ctx.fillStyle = Theme.c;
  
  
  		button.style.background = normal;
  		style(button, no_borders);
  		me.dropshadow = false;
  		ctx.fillStyle = Theme.c;
  		ctx.shadowColor = null;
  		ctx.shadowBlur = 0;
  		ctx.shadowOffsetX = 0;
  		ctx.shadowOffsetY = 0;
  		me.draw();
  	});
  
  	if (icon) this.setIcon(icon);
  }
  
  IconButton.prototype.CMD_MAP = {
  	M: 'moveTo',
  	L: 'lineTo',
  	Q: 'quadraticCurveTo',
  	C: 'bezierCurveTo',
  	Z: 'closePath'
  };
  
  IconButton.prototype.draw = function() {
  	if (!this.icon) return;
  
  	var ctx = this.ctx;
  
  	var glyph = font.fonts[this.icon];
  
  	var height = this.size;
  	var dpr = window.devicePixelRatio;
  	var scale = height / font.unitsPerEm * dpr;
  	var path_commands =  glyph.commands.split(' ');
  
  	ctx.save();
  	ctx.clearRect(0, 0, this.canvas.width * dpr, this.canvas.height * dpr);
  
  	if (this.dropshadow) {
  		ctx.save();
  		ctx.fillStyle = Theme.b;
  		ctx.translate(1.5 * dpr, 1.5 * dpr);
  		ctx.scale(scale, -scale);
  		ctx.translate(0 , -font.ascender);
  		ctx.beginPath();
  
  		for (let i = 0, il = path_commands.length; i < il; i++) {
  			const cmds = path_commands[i].split(',');
  			const params = cmds.slice(1);
  
  			ctx[this.CMD_MAP[cmds[0]]].apply(ctx, params);
  		}
  		ctx.fill();
  		ctx.restore();
  	}
  
  	ctx.scale(scale, -scale);
  	ctx.translate(0, -font.ascender);
  	ctx.beginPath();
  
  	for (let i = 0, il = path_commands.length; i < il; i++) {
  		const cmds = path_commands[i].split(',');
  		const params = cmds.slice(1);
  
  		ctx[this.CMD_MAP[cmds[0]]].apply(ctx, params);
  	}
  	ctx.fill();
  	ctx.restore();
  
  	/*
  	var triangle = height / 3 * dpr;
  	ctx.save();
  	// ctx.translate(dpr * 2, 0);
  	// ctx.fillRect(this.canvas.width - triangle, this.canvas.height - triangle, triangle, triangle);
  	ctx.beginPath();
  	ctx.moveTo(this.canvas.width - triangle, this.canvas.height - triangle / 2);
  	ctx.lineTo(this.canvas.width, this.canvas.height - triangle / 2);
  	ctx.lineTo(this.canvas.width - triangle / 2, this.canvas.height);
  	ctx.fill();
  	ctx.restore();
  	*/
  };
  
  export { IconButton }