import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { CardService } from './card.service';

@Component({
	selector: 'esp-card-component',
	templateUrl: './card.component.html',
	styleUrls: ['./card.component.scss'],
})
export class CardComponent implements OnInit {
	@Input() cardTitle: string;
	@Input() autoHeight = false;
	@Input() minHeight = 0;
	@Input() styleTitle = 'font-weight-bold font-size-16 nunito p-v-16 p-h-24';
	@Input() showBorder = true;
	@Input() link = { show: false, text: null };
    @Input() button = { show: false, text: null, totalSelected: 0 };
	@Input() primaryButton = { show: false, text: null, class: '' };
    @Input() resetLink = { show: false, text: null };
	@Input() goToDropDown = { show: false, title: null, options:null};
	@Input() showToggle = { status: false, display: '' };
	@Input() toggleswitch = false;
	@Input() showCardExpansion = false;
	@Input() showSeparator = false;
	@Input() showSwitch = false;
	@Input() cardSubTitle: string;
	@Input() cardStats = [];
	@Input() timeStats = [];
	@Input() expansionState =  false;
	@Input() styleContainer = 'border-radius-2';
	@Input() styleContent = 'p-24';
	@Input() i18n: any;
	@Input() showBreadcrumbs = false;
	@Input() breadcrumbs: any;
	@Input() legendsConfig: any;
	@Input() gridIcons: any;
	@Input() componentScope: any;	
	@Input() cardFilterList = [];
	@Output() buttonClicked: EventEmitter<any> = new EventEmitter();
	@Output() expandGrid: EventEmitter<boolean> = new EventEmitter();
	@Output() primaryButtonClicked: EventEmitter<any> = new EventEmitter();
    @Output() resetLinkClicked = new EventEmitter();
	@Output() TopClicked = new EventEmitter();
	@Output() BottomClicked = new EventEmitter();
	@Output() BreadcrumbClicked = new EventEmitter();
	@Output() GoToChange = new EventEmitter();
	@Output() ToggleEvent = new EventEmitter();
	@Output() gridIconClickEvent = new EventEmitter();
	@Output() cardFilterValueChanged = new EventEmitter();
	@Output() cardFilterSelectAllChange = new EventEmitter();
	@Output() cardFilterMultiSelectChange = new EventEmitter();	
	
	toogleState = false;
	linkState = false;
	classes: string;
	isTop = true;
	@ViewChild('cardContainer') cardContainer: ElementRef;

	constructor(private card: CardService) {}

	ngOnInit(): void {
		if (this.minHeight > 0) {
			setTimeout(() => {
				this.cardContainer.nativeElement.style.minHeight = this.minHeight + 'px';
			}, 500);
		}
        this.classes = this.applyClasses(this.styleTitle, this.showBorder);
	}

	applyClasses(styleTitle, showBorder) {
		return [styleTitle, showBorder ? 'title-border' : ''].join(' ');
	}

	onToggle() {
		this.toogleState = !this.toogleState;
		this.card.triggerEvent({ source: this.cardTitle, action: 'toggle', value: this.toogleState });
		this.ToggleEvent.emit({ source: this.cardTitle, action: 'toggle', value: this.toogleState })
	}

	emitNavigateTo() {
		this.buttonClicked.emit(true);
	}

	emitPrimaryNavigateTo() {
		this.primaryButtonClicked.emit(true);
	  }

    onReset(filterName = '') {
        this.resetLinkClicked.emit(filterName);
    }

	top() {
		this.TopClicked.emit();
		this.isTop = true;
	}

	bottom() {
		this.BottomClicked.emit();
		this.isTop = false;
	}

	onExpansion() {
		this.expansionState = !this.expansionState;
		this.expandGrid.emit(this.expansionState);
		this.card.triggerEvent({ source: this.cardTitle, action: 'expansion', value: this.expansionState });
	}

	onLink() {
		this.linkState = !this.linkState;
		this.card.triggerEvent({ source: this.cardTitle, action: 'linkClicked', value: this.linkState });
	}

	breadcrumbClicked(params) {
		this.BreadcrumbClicked.emit(params);
	}

	onGoToDropdownChange(event){
		this.GoToChange.emit(event)
	}

	onGridIconClickEvent(event){
		this.gridIconClickEvent.emit(event);
	}

	onCardFilterValueChanged(event,filterName){
		this.cardFilterValueChanged.emit({event,filterName});
	}
	onCardFilterSelectAllChange(event,filterName){		
		this.cardFilterSelectAllChange.emit({event,filterName});
	}
	onCardFilterMultiSelectChange(event,filterName){
		this.cardFilterMultiSelectChange.emit({event,filterName});
	}
}