import { Component, Input, OnInit } from '@angular/core';
import { ToolbarStatus } from '../../../utils';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { ALERTS, FORECAST_RUN } from '../../../mockup';
import { UserConfigService } from '../../../utils';

@Component({
	selector: 'esp-simple-toolbar',
	templateUrl: './simple-toolbar.component.html',
	styleUrls: ['./simple-toolbar.component.scss'],
})
export class SimpleToolbarComponent implements OnInit {
	@Input() src: string;
	@Input() title: string;
	toolbarData: any = { groups: [], toolbarType: '' };
	iconStatus = ToolbarStatus;
	appConfig = null;
	titleData = null;
	workflowIndex = 0;
	toolbarIcons$: Observable<any>;
	i18n: any;
	constructor(
		private userConfig: UserConfigService,
		// private toolbarService: ToolbarService,
		private activatedRoute: ActivatedRoute,
		private router: Router
	) {}

	ngOnInit(): void {
		this.userConfig.cast.subscribe(response => {
			this.appConfig = response ?? null;
			this.i18n =
				response && response['i18n'] && response['i18n']['translations'] ? response['i18n']['translations'] : null;
		});
		this.titleData = ALERTS['title-details'];
		switch (this.src) {
			case 'alerts':
				this.toolbarIcons$ = of(ALERTS['toolbar']);
				break;
			case 'forecast-runs':
				this.toolbarIcons$ = of(FORECAST_RUN['toolbar']);
		}
	}

	getAlertTitle(title: string[]): string {
		let alertTitle: string;
		this.activatedRoute.params.subscribe(param => {
			const alertId = param.id;
			alertTitle = title[alertId];
		});
		return this.mapI18n(alertTitle);
	}

	toolbarClicked(name: string, type: string): void {
		// this.toolbarService.editToolBar(name, type, this.src, this.toolbarData);
	}

	mapI18n(title: string): string {
		return this.i18n[title];
	}

	navigateTo() {
		this.router.navigate(['/predictive-ordering']);
	}
}