class TabView extends View {
	constructor(element = null) {
		super(element);

		this.tabHeader = document.createElement("tab-header");
		this.element.insertBefore(this.tabHeader, this.element.firstChild);

		this.tabsContainer = document.createElement("tabs-container");
		this.tabHeader.appendChild(this.tabsContainer);

		this.tabs = { };
		this.tabTitleElements = { };

		var tabElements = this.element.querySelectorAll("tab");
		for (var i = 0; i < tabElements.length; i++) {
			this.addTab(tabElements[i], i == 0);
		}
	}

	addTab(tabElement, select = false) {
		var id = tabElement.getAttribute("id");

		//Add the tab title element.
		var title = tabElement.getAttribute("tab-title");
		var titleElement = document.createElement("tab-title");
		titleElement.innerText = title;
		titleElement.setAttribute("id", id);
		titleElement.addEventListener("click", this.onTabTitlePressed.bind(this));
		this.tabsContainer.appendChild(titleElement);
		this.tabTitleElements[id] = titleElement;

		//Add the tab itself to the tab view.
		this.element.appendChild(tabElement);

		this.tabs[id] = tabElement;

		if (select) {
			this.selectTab(id);
		}
		else {
			tabElement.style.display = "none";
		}
	}

	onTabTitlePressed(event) {
		var id = event.currentTarget.getAttribute("id");
		this.selectTab(id);
	}

	selectTab(id) {
		for (var tabId in this.tabs) {
			var tab = this.tabs[tabId];
			var tabTitleElement = this.tabTitleElements[tabId];
			tab.style.display = (tabId == id ? "" : "none");
			tabTitleElement.className = (tabId == id ? "selected" : "");
		}
	}
}

UIKit.registerViewType(TabView, "tab-view");