/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
import { WbShape } from './wb-tool-shape';
import { ToolUtil } from './wb-tool-util';

import * as fabric from 'fabric';

export class Clipart extends WbShape {
	constructor(wb, btn, settings, sBtn) {
		super(wb, sBtn);

		const self = this;
		this.createShape = (canvas) => {
			const imgSrc = btn.data('image')
				, opts = {
					left: self.orig.x
					, top: self.orig.y
					, scaleX: 0.
					, scaleY: 0.
					, omType: 'Clipart'
					, _src: imgSrc
					, opacity: self.opacity
					, stroke: self.stroke.color
				};
			if (imgSrc.toLowerCase().endsWith('svg')) {
				fabric.loadSVGFromURL(imgSrc)
				.then(({ objects }) => {
					self.orig.width = 32;
					self.orig.height = 32;
					self.obj = fabric.util.groupSVGElements(objects, opts);
					self.obj.set(opts);
					canvas.add(self.obj);
				});
			} else {
				fabric.FabricImage.fromURL(imgSrc).then((img) => {
					self.orig.width = img.width;
					self.orig.height = img.height;
					self.obj = img.set(opts);
					canvas.add(self.obj);
				});
			}
		};
		this.internalActivate = () => {
			ToolUtil.disableAllProps(settings);
			ToolUtil.enableOpacity(settings, this);
		};
	}

	add2Canvas() {}

	updateShape(pointer) {
		if (!this.obj) {
			return; // not ready
		}
		const dx = (pointer.x - this.orig.x) * 2
			, dy = (pointer.y - this.orig.y) * 2
			, d = Math.sqrt(dx * dx + dy * dy)
			, scale = d / this.obj.width;
		this.obj.set({
			scaleX: scale
			, scaleY: scale
			, angle: Math.atan2(dy, dx) * 180 / Math.PI
		});
	};
};
