import { Object3D } from './Object3D';
import { Utils } from '../main';

// #endregion

/**
 * @class
 * HTML 标记
 * </br>The html 2d marker object.
 * @memberof THING
 * @extends THING.Object3D
 * @public
 * @example
 * let html2dMarker = new THING.HTML2DMarker({
 *	element: document.getElementById("containerId"),
 *	pivot: [0.5, 0, 0.5],
 *	offset: [0, 0, 0]
 * })
 */
class HTML2DMarker extends Object3D {

	/**
	 * @constructor
	 * @public
	 */
	constructor(param = {}) {
		super(Utils.cloneObject(param));

		let { autoRemove = true, autoBind = false, offset = [0, 0, 0], pivot = [0.5, 0.5], factor = 1, zIndex = null } = param;
		this._autoRemove = autoRemove;
		this._autoBind = autoBind;
		this._offset = offset;
		this._pivot = pivot;
		this._factor = factor;
		this._zIndex = zIndex;

		if (param.element) {
			this.css2d.domElement = param.element;
		}
	}

	onSetupComponent(param) {
		super.onSetupComponent(param);
		this.addComponent(Utils.createObject('CSS2DComponent', { delegate: this.app.delegate }), "css2d");

		const enableEventProxy = Utils.parseBoolean(param['enableEventProxy'], true);
		this.css2d.enableEventProxy = enableEventProxy;
		this.css2d.autoRemove = this._autoRemove;
		this.css2d.offset = this._offset;
		this.css2d.pivot = this._pivot;
		this.css2d.factor = this._factor;
	}

	// #region Accessor
	/**
	 * 设置/获取 DOM 元素
	 * @type {object}
	 * @public
	 */
	get element() {
		if (this.css2d) {
			return this.css2d.domElement;
		}
		return null;
	}
	set element(value) {
		if (this.css2d.domElement == value) {
			return;
		}
		this.css2d.domElement = value;
		if (value) {
			this.css2d.autoBind = true;
		}
	}

	/**
	 * 设置/获取 是否自动移除
	 * @type {boolean}
	 * @default true
	 * @public
	 */
	get autoRemove() {
		return this._autoRemove;
	}
	set autoRemove(value) {
		if (this._autoRemove == value) {
			return;
		}
		this._autoRemove = value;
		if (this.css2d) {
			this.css2d.autoRemove = value;
		}
	}

	/**
	 * 设置/获取 是否自动绑定
	 * @type {boolean}
	 * @default false
	 * @public
	 */
	get autoBind() {
		return this._autoBind;
	}
	set autoBind(value) {
		if (this._autoBind == value) {
			return;
		}
		this._autoBind = value;
		if (this.css2d) {
			this.css2d.autoBind = value;
		}
	}

	/**
	 * 设置/获取 锚点
	 * @type {Array}
	 * @public
	 */
	get pivot() {
		return this._pivot;
	}
	set pivot(value) {
		if (this._pivot == value) {
			return;
		}
		this._pivot = value;
		if (this.css2d) {
			this.css2d.pivot = value;
		}
	}

	/**
	 * 设置/获取 偏移
	 * @type {Array}
	 * @public
	 */
	get offset() {
		return this._offset;
	}
	set offset(value) {
		if (this._offset == value) {
			return;
		}
		this._offset = value;
		if (this.css2d) {
			this.css2d.offset = value;
		}
	}

	/**
	 * 设置/获取 缩放
	 * @type {number}
	 * @public
	 */
	get factor() {
		return this._factor;
	}
	set factor(value) {
		if (this._factor == value) {
			return;
		}
		this._factor = value;
		if (this.css2d) {
			this.css2d.factor = value;
		}
	}

	/**
	 * 设置/获取 zIndex,用于设置DOM元素的Z-Index值，null表示自动设置 Z-Index
	 * @type {number}
	 * @default null
	 * @public
	 */
	get zIndex() {
		return this._zIndex;
	}
	set zIndex(value) {
		if (this._zIndex == value) {
			return;
		}
		this._zIndex = value;
		if (this.css2d) {
			this.css2d.zIndex = value;
		}
	}

	// #endregion

	get isHTML2DMarker() {
		return true;
	}

}

export { HTML2DMarker }