class SplitView extends View {
	static get SPLITTER_WIDTH() {
		return "10px";
	}

	/**
	 * The build function is called in the constructor when no element was passed as the base.
	 * Override it to create custom subviews or manipulate the root element.
	 * Don't forget to return the element in the end!
	 */
	build(element) {
		this.leftView = null;
		this.partitionBar = new SplitViewPartitionBar(this);
		this.rightView = null;

		this.viewContainers = [ ];
		for (var i = 0; i < 2; i++) {
			var viewContainer = new View();
			if (i == 1) {
				element.appendChild(this.partitionBar.element);
			}
			element.appendChild(viewContainer.element);
			this.viewContainers.push(viewContainer);
		}

		return element;
	}

	/**
	 * Called once the view has been processed by UIKit during the view controller initialization.
	 */
	viewDidLoad() { }

	/**
	 * Called everytime before the view is shown.
	 * The layout is already done at this step, so it's safe to use scrollWidth and scrollHeight and what not.
	 */
	viewWillAppear() {
		if (this.leftView) {
			this.leftView.viewWillAppear();
		}
		if (this.rightView) {
			this.rightView.viewWillAppear();
		}
	}

	/**
	 * Called everytime after the view is shown.
	 */
	viewDidAppear() {
		if (this.leftView) {
			this.leftView.viewDidAppear();
		}
		if (this.rightView) {
			this.rightView.viewDidAppear();
		}
	}

	/**
	 * Called everytime before the view is hidden.
	 */
	viewWillDisappear() {
		if (this.leftView) {
			this.leftView.viewWillDisappear();
		}
		if (this.rightView) {
			this.rightView.viewWillDisappear();
		}
	}

	/**
	 * Called everytime after the view is hidden.
	 */
	viewDidDisappear() {
		if (this.leftView) {
			this.leftView.viewDidDisappear();
		}
		if (this.rightView) {
			this.rightView.viewDidDisappear();
		}
	}

	/**
	 * Set the width of the left view in percent.
	 * The right view's width will be adjusted automatically.
	 */
	setLeftViewWidth(width) {
		if (this.leftView) {
			this.leftView.element.style.width = "calc(" + width + "% - (" + SplitView.SPLITTER_WIDTH + " / 2))";
		}
		if (this.rightView) {
			this.rightView.element.style.width = "calc(" + (100 - width) + "% - (" + SplitView.SPLITTER_WIDTH + " / 2))";
		}
	}

	setLeftView(view) {
		this.leftView = view;

		if (this.viewContainers[0].element.childCount > 0) {
			this.viewContainers[0].element.removeChild(this.viewContainers[0].element.firstChild);
		}
		
		if (view) {
			this.viewContainers[0].element.appendChild(view.element);
			this.leftView.viewDidLoad();
		}
	}

	setRightView(view) {
		this.rightView = view;

		if (this.viewContainers[1].element.childCount > 0) {
			this.viewContainers[1].element.removeChild(this.viewContainers[1].element.firstChild);
		}
		
		if (view) {
			this.viewContainers[1].element.appendChild(view.element);
			this.rightView.viewDidLoad();
		}
	}
}

class SplitViewPartitionBar extends View {
	constructor(splitView) {
		super();

		this.splitView = splitView;
	}

	build(element) {
		element.addEventListener("mousedown", this.onMouseDown.bind(this));
		document.body.addEventListener("mousemove", this.onMouseMove.bind(this));
		document.body.addEventListener("mouseup", this.onMouseUp.bind(this));

		return element;
	}

	onMouseDown(event) {
		this.dragging = true;
	}

	onMouseMove(event) {
		if (this.dragging) {
			var splitViewRect = this.splitView.element.getBoundingClientRect();
			var leftPosition = event.clientX - splitViewRect.left;
			var rect = this.element.getBoundingClientRect();

			var viewWidth = leftPosition;
			this.splitView.viewContainers[0].element.style.width = ((viewWidth - (rect.width / 2)) / splitViewRect.width) * 100 + "%";
			this.splitView.viewContainers[1].element.style.width = (((splitViewRect.width - viewWidth) - (rect.width / 2)) / splitViewRect.width) * 100 + "%";
		}
	}

	onMouseUp(event) {
		if (this.dragging) {
			this.dragging = false;
		}
	}
}

UIKit.registerViewType(SplitView);