import { Component, OnInit, OnChanges, Input, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';

@Component({
	selector: 'esp-right-menu-modal',
	templateUrl: './right-menu-modal.html',
	styleUrls: ['./right-menu-modal.scss'],
})
export class RightMenuModal implements OnInit {
	@Input() modalName: string;
	@Input() contentOptions: [];
	@Input() footerOptions: [];

	@Input() dropdownType: string;
	@Input() disabled = false;
	@Input() dropdownPosition: string;
	@Input() iconClass = 'fa-ellipsis-v';

	@Output()
	itemClicked: EventEmitter<any> = new EventEmitter<any>();

	showOptions = false;

	constructor(private eRef: ElementRef) {}

	@HostListener('document:click', ['$event'])
	onMenuDeselect(event) {
		if (!this.eRef.nativeElement.contains(event.target)) {
			this.showOptions = false;
		}
	}

	ngOnInit(): void {}

	toggleDropdown(): void {
		if (!this.disabled) {
			this.showOptions = !this.showOptions;
		}
	}

	onItemClick(item: string): void {
		this.itemClicked.emit(item);
	}
}