import { MathUtils } from '@uino/base-thing';
import { CSS3DComponent } from './CSS3DComponent';

let _vec3 = MathUtils.createVec3();
let _quat = MathUtils.createQuat();

/**
 * @class WebViewComponent
 * 网页视图组件。
 * @memberof THING
 * @extends THING.CSS3DComponent
 * @public
 */
class WebViewComponent extends CSS3DComponent {

	constructor(options) {
		super(options);

		this._cssFactor = 1000;

		this._url = '';
		this._domWidth = 0;
		this._domHeight = 0;

		this._regionNode = null;
	}

	// #region Private

	_updateCSS3DObjectPosition() {
		this._regionNode.getWorldPosition(_vec3);

		let cssFactor = this._cssFactor;
		this._css3DNode.position = [_vec3[0] * cssFactor, _vec3[1] * cssFactor, _vec3[2] * cssFactor];
	}

	_updateCSS3DObjectQuaternion() {
		this._regionNode.getWorldQuaternion(_quat);

		this._css3DNode.quaternion = _quat;
	}

	_updateCSS3DObjectScale() {
		let domElement = this.domElement;

		let scrollWidth = domElement.scrollWidth;
		let scrollHeight = domElement.scrollHeight;
		if (!scrollWidth || !scrollHeight) {
			return;
		}

		this._regionNode.getWorldScale(_vec3);

		let cssFactor = this._cssFactor;
		let scaleFactorX = cssFactor / (scrollWidth / _vec3[0]);
		let scaleFactorY = cssFactor / (scrollHeight / _vec3[1]);
		this._css3DNode.scale = [scaleFactorX, scaleFactorY, 1];
	}

	// #endregion

	// #region Overrides

	onRender() {
		// Get region node
		if (!this._regionNode) {
			return;
		}

		if (this.updateDomElementVisibility()) {
			// Update CSS 3D object scale and position
			this._updateCSS3DObjectScale();
			this._updateCSS3DObjectQuaternion();
			this._updateCSS3DObjectPosition();

			// Update waiting commands
			this._processWaitingCommands();
		}
	}

	onCreateCSS3DNode() {
		return this._delegate.createWebViewCSS3DNode(this._renderType);
	}

	onDisposeCSS3DNode() {
		this._delegate.disposeWebViewCSS3DNode(this._css3DNode);
	}

	// #endregion

	/**
	 * 获取/设置区域节点。
	 * @type {object}
	 * @public
	 */
	get regionNode() {
		return this._regionNode;
	}
	set regionNode(value) {
		this._regionNode = value;
	}

	/**
	 * 获取/设置 URL。
	 * @type {string}
	 * @public
	 */
	get url() {
		return this._url;
	}
	set url(value) {
		this._url = value;

		// Create the iframe element
		this.domElement = document.createElement('iframe');
		this.domElement.src = value;
		this.domElement.style.border = 'none';
		this.domElement.style.width = this._domWidth + "px";
		this.domElement.style.height = this._domHeight + "px";
	}

	/**
	 * 获取/设置 DOM 宽度。
	 * @type {number}
	 * @public
	 */
	get domWidth() {
		return this._domWidth;
	}
	set domWidth(value) {
		this._domWidth = value;

		if (this.domElement) {
			this.domElement.style.width = this._domWidth + "px";
		}
	}

	/**
	 * 获取/设置 DOM 高度。
	 * @type {number}
	 * @public
	 */
	get domHeight() {
		return this._domHeight;
	}
	set domHeight(value) {
		this._domHeight = value;

		if (this.domElement) {
			this.domElement.style.height = this._domHeight;
			this.domElement.style.height = this._domHeight + "px";
		}
	}

}

export { WebViewComponent }