import { Component, Input, ContentChildren, TemplateRef, ContentChild, AfterContentInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

export type StatusBoxColors = "red" | "green" | "blue" | "yellow" | "purple" | "lilac" | "cyan" | "darkblue";
@Component({
	selector: 'rd-status-box-content',
	template: `
		<ng-content></ng-content>
	`
})
export class StatusBoxContent extends RdComponent {
	@Input('rd-text') text: string; // rd-title
	@Input('rd-icon') icon: string;
	@Input('rd-color') color: StatusBoxColors;
	@Input('rd-explanation-tooltip') tooltip: string;

	@ContentChild(TemplateRef) template;
}

@Component({
	selector: 'rd-status-box',
	template: `
			<div class="m-pricing-table-1">
				<div class="m-pricing-table-1__items row m-stack m-stack--ver m-stack--general m-stack--demo" style="padding:0"> 
					<div class="m-pricing-table-1__item m-stack__item" *ngFor="let item of contents._results" [ngClass]="colmdClass">
						<div class="m-pricing-table-1__visual" style="margin-top:3rem">
							<div class="m-pricing-table-1__hexagon2"></div> 
							<span class="m-pricing-table-1__icon" [ngClass]="colorClasses[item.color]" [rd-tooltip]="item.tooltip">
								<i [class]="item.icon" style="font-size:3.57rem;cursor:pointer"></i>
							</span>
						</div> 
						<span class="m-pricing-table-1__price" style="margin-top:85px;margin-bottom:.571rem;font-size: 1.3rem;font-weight: 500">
							{{item.text}}
						</span>
						<div class="m-pricing-table-1__description" style="margin:0;font-size:medium">							
							<ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="item.template"></ng-template>
						</div>
					</div>
				</div>
			</div>
	`
})
export class StatusBox extends RdComponent implements AfterContentInit {
	@ContentChildren(StatusBoxContent) contents;

	colmdClass = "col-md-3";

	ngAfterContentInit() {
		let contentCount = Math.ceil(this.contents._results.length);
		switch (contentCount) {
			case 2: this.colmdClass = "col-md-6"; break;
			case 3: this.colmdClass = "col-md-4"; break;
			case 4: this.colmdClass = "col-md-3"; break;
			case 5:
			case 6:
				this.colmdClass = "col-md-6"; break;
		}
	}

	// getColorClass(color: StatusBoxColors) {
	// 	switch (color) {
	// 		case 'red': return 'm--font-danger';
	// 		case 'green': return 'm--font-success';
	// 		case 'blue': return 'm--font-info';
	// 		case 'yellow': return 'm--font-warning';
	// 		case 'purple': return 'm--font-focus';
	// 		case 'lilac': return 'm--font-brand';
	// 		case 'cyan': return 'm--font-accent';
	// 		case 'darkblue': return 'm--font-primary';
	// 		default: return 'm--font-accent';
	// 	}
	// }

	colorClasses = {
		red: 'm--font-danger',
		green: 'm--font-success',
		blue: 'm--font-info',
		yellow: 'm--font-warning',
		purple: 'm--font-focus',
		lilac: 'm--font-brand',
		cyan: 'm--font-accent',
		darkblue: 'm--font-primary'
	}
}