import { Component, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { AppComponent } from '../../app.component';

@Component({
	selector: "rd-quick-sidebar",
	template: `
		<div id="m_quick_sidebar" class="m-quick-sidebar m-quick-sidebar--tabbed m-quick-sidebar--skin-light" appunwraptag>
			<div id="m-quick-sidebar__content" class="m-quick-sidebar__content m--hide">
				<span id="m_quick_sidebar_close" class="m-quick-sidebar__close" (click)="hideQuickSidebar()">
					<i class="la la-close"></i>
				</span>
				<ul class="nav nav-tabs m-tabs-line m-tabs-line--success" role="tablist">
					<li class="nav-item m-tabs__item" *ngFor="let item of items" (click)="contentClicked(item)">
						<a class="nav-link m-tabs__link" data-toggle="tab" [href]="'#' + item.prop?.text" role="tab" [ngClass]="{active: item.active}">
							<rd-icon [rd-class]="item.prop?.icon" rd-size="medium" [rd-color]="item.prop?.iconColor"></rd-icon>
							{{item.prop?.text}}
						</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane" [ngClass]="{active: item.active}" *ngFor="let item of items" [id]="item.prop?.text" role="tabpanel">
						<rd-dynamic-component-loader [rd-page-type]="item"></rd-dynamic-component-loader>
					</div>
				</div>
			</div>
		</div>
	`
})
export class QuickSidebar extends RdComponent implements AfterViewInit {

	items = [];
	constructor() {
		super();
		this.items = AppComponent.client.getQuickSidebarItems();
		this.setTabProperties();
		if (this.items.length > 0) this.activateContent(this.items[0]);
	}

	ngAfterViewInit() {
		if (this.activeContent) this.activeContent.prop.onOpen();
	}

	hideQuickSidebar() {
		this.jQuery("#m_quick_sidebar").removeClass("m-quick-sidebar--on");
	}

	activeContent;
	activateContent(content) {
		if (this.activeContent) this.activeContent.active = false;
		this.activeContent = content;
		this.activeContent.active = true;
	}

	contentClicked(content) {
		if (!content.active) {
			this.activateContent(content);
			content.prop.onOpen();
		}
	}

	setTabProperties() {
		for (let item of this.items) {
			item.prop = item.prototype.tabProperties();
		}
	}
}