package hide.comp;

class Tabs extends Component {

	public var currentTab(default, set) : Element;
	var header : Element;

	public function new(?parent,?el) {
		super(parent,el);
		element.addClass("hide-tabs");
		header = new Element("<div>").addClass("tabs-header").prependTo(element);
		syncTabs();
		var t = getTabs()[0];
		if( t != null ) currentTab = new Element(t);
	}

	public function createTab( title : String, ?icon : String ) {
		var e = new Element('<div class="tab" name="$title">');
		if( icon != null ) e.attr("icon",icon);
		e.appendTo(element);
		syncTabs();
		if( currentTab == null )
			currentTab = e;
		return e;
	}

	function set_currentTab( e : Element ) {
		var index = Std.parseInt(e.attr("index"));
		getTabs().hide();
		header.children().removeClass("active").filter("[index=" + index + "]").addClass("active");
		currentTab = e;
		onTabChange(index);
		e.show();
		return e;
	}

	public function getTabs() : Element {
		return element.children(".tab");
	}

	public dynamic function onTabChange( index : Int ) {
	}

	function syncTabs() {
		header.html("");
		var index = 0;
		for( t in getTabs().elements() ) {
			var icon = t.attr("icon");
			var name = t.attr("name");
			var index = index++;
			var tab = new Element("<div>").html( (icon != null ? '<div class="fa fa-$icon"></div> ' : '') + (name != null ? name : '') );
			t.attr("index", index);
			tab.attr("index", index);
			tab.appendTo(header);
			tab.click(function(_) currentTab = t);
		}
		if( currentTab != null )
			this.currentTab = currentTab;
	}

}