import { Utils } from '../common/Utils';
import { EventCaptureComponent } from './EventCaptureComponent';

/**
 * @class BaseCSSComponent
 * 基础 CSS 组件。
 * @memberof THING
 * @extends THING.EventCaptureComponent
 * @public
 */
class BaseCSSComponent extends EventCaptureComponent {

	constructor(options) {
		super(options);

		this._enableEventProxy = false;
		this._glassBlur = 0; // default no blur

		this.onTriggerEvent = (ev) => {
			let domElement = this._domElement;
			let delegate = this._delegate;

			let type = ev.type;

			if (this._enableEventProxy) {
				this._object.trigger(type, null, ev);
			}
			else {
				if (type == 'mouseenter') {
					delegate.dispatchEvent({ type: 'domenter', domElement });
				}
				else if (type == 'mouseleave') {
					delegate.dispatchEvent({ type: 'domleave', domElement });
				}
			}
		};

		this._active = true;

		this._zIndex = null;

		this._visible = null;
	}

	// #region Private

	// #endregion

	updateDomElementVisibility(isVisible = true) {
		let visible = false;

		// Auto update visible state
		if (this._visible === null) {
			if (isVisible && this._object.visible && !this._object.invisible) {
				visible = true;
			}
		}
		// Use custom visible state
		else {
			// Only use custom visible state if it's in sight
			if (isVisible) {
				visible = this._visible;
			}
		}

		this._domElement._setVisible(visible);

		return visible;
	}

	// #region Overrides

	onVisibleChange(value) {
		if (!this._domElement) {
			return;
		}

		if (this._visible !== null) {
			return;
		}

		this._domElement._setVisible(value);
	}

	// #endregion

	/**
	 * 获取/设置是否激活组件。
	 * @type {boolean}
	 * @public
	 */
	get active() {
		return this._active;
	}
	set active(value) {
		if (this._active == value) {
			return;
		}

		this._active = value;

		// If the object has been deactive then hide it
		if (!value) {
			this.updateDomElementVisibility(false);
		}
	}

	/**
	 * 获取/设置是否启用事件代理。<br>
	 * True 表示可以触发对象的事件，例如 'click', 'mousemove' 等。
	 * @type {boolean}
	 * @public
	 */
	get enableEventProxy() {
		return this._enableEventProxy;
	}
	set enableEventProxy(value) {
		this._enableEventProxy = value;
	}

	/**
	 * 获取/设置可见状态，null 表示自动更新 DOM 元素的可见状态。
	 * @type {boolean}
	 * @public
	 */
	get visible() {
		return this._visible;
	}
	set visible(value) {
		this._visible = value;
	}

	/**
	 * 获取/设置 DOM 元素的 Z-Index 值，null 表示自动设置 Z-Index。
	 * @type {number}
	 * @public
	 */
	get zIndex() {
		if (Utils.isValid(this._zIndex)) {
			return this._zIndex;
		}

		if (this._domElement) {
			return this._domElement.style.zIndex;
		}

		return null;
	}
	set zIndex(value) {
		this._zIndex = value;

		if (Utils.isValid(value)) {
			if (this._domElement) {
				this._domElement.style.zIndex = value;
			}
		}
	}

	/**
	 * 获取/设置是否可交互。
	 * @type {boolean}
	 * @public
	 */
	get interactive() {
		if (this._domElement) {
			return this.domElement.style.pointerEvents == 'all';
		}
		return null;
	}
	set interactive(value) {
		if (this._domElement) {
			this.domElement.style.pointerEvents = value ? 'all' : 'none';
		}
	}

	/**
	 * 获取/设置玻璃模糊效果值（以像素为单位），默认值为 0。
	 * @type {number}
	 * @public
	 */
	get glassBlur() {
		return this._glassBlur;
	}
	set glassBlur(value) {
		this._glassBlur = value;
		if (this._domElement) {
			this._domElement.style.backdropFilter = value > 0 ? `blur(${value}px)` : 'none';
			this._domElement.style.webkitBackdropFilter = value > 0 ? `blur(${value}px)` : 'none';
			// add some glass-like background when blur is enabled
			this._domElement.style.backgroundColor = value > 0 ? 'rgba(255, 255, 255, 0.1)' : '';
		}
	}

	/**
	 * 获取/设置DOM元素。
	 * @type {object}
	 * @public
	 */
	get domElement() {
		return super.domElement;
	}
	set domElement(value) {
		super.domElement = value;

		let domElement = this._domElement;

		if (this._visible !== null) {
			domElement._setVisible(this._visible);
		}

		if (this._zIndex !== null) {
			domElement.style.zIndex = this._zIndex;
		}

		if (this._factor !== null) {
			domElement.style.transform = `scale(${this._factor}, ${this._factor})`;
		}

		if (this._glassBlur > 0) {
			domElement.style.backdropFilter = `blur(${this._glassBlur}px)`;
			domElement.style.webkitBackdropFilter = `blur(${this._glassBlur}px)`;
			domElement.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
		}
	}

}

export { BaseCSSComponent }