export default class WxCanvas {
	constructor(ctx, canvasId) {
		this.ctx = ctx
		this.canvasId = canvasId
		this.chart = null
		WxCanvas.initStyle(ctx)
		this.initEvent()
	}
	getContext(contextType) {
		return contextType === '2d' ? this.ctx : null
	}
	setChart(chart) {
		this.chart = chart
	}
	addEventListener() {
		// noop
	}
	attachEvent() {
		// noop
	}
	detachEvent() {
		// noop
	}
	static initStyle(ctx) {
		const styles = ['fillStyle', 'strokeStyle', 'globalAlpha', 'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
			'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
		]
		styles.forEach((style) => {
			// eslint-disable-next-line accessor-pairs
			Object.defineProperty(ctx, style, {
				set: (value) => {
					if (
						(style !== 'fillStyle' && style !== 'strokeStyle') || (value !== 'none' && value !== null)) {
						ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value)
					}
				}
			})
		})
		ctx.createRadialGradient = () => ctx.createCircularGradient(arguments)
	}
	initEvent() {
		this.event = {}
		const eventNames = [{
			wxName: 'touchStart',
			ecName: 'mousedown'
		}, {
			wxName: 'touchMove',
			ecName: 'mousemove'
		}, {
			wxName: 'touchEnd',
			ecName: 'mouseup'
		}, {
			wxName: 'touchEnd',
			ecName: 'click'
		}]
		eventNames.forEach((name) => {
			this.event[name.wxName] = (e) => {
				const touch = e.mp.touches[0]
				this.chart._zr.handler.dispatch(name.ecName, {
					zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
					zrY: name.wxName === 'tap' ? touch.clientY : touch.y
				})
			}
		})
	}
}