import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core';
import { ISService } from '../common/is.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { Context, ContextParam, ContextNode } from '../common/is.model';
import { ActivatedRoute, Params } from '@angular/router';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
	selector: 'app-contexts',
	templateUrl: './contexts.component.html',
	styleUrls: ['./contexts.component.css']
})
export class ContextsComponent implements AfterViewInit, OnInit {
	contextsDatasource: MatTableDataSource<Context> = new MatTableDataSource<Context>([]);

	colums: string[] = ['id', 'label', 'type', 'buttons'];

	@ViewChild(MatSort) sort: MatSort | undefined

	constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) {
	}

	ngOnInit() {
		this.reload();
	}

	ngAfterViewInit() {
		if (this.sort) this.contextsDatasource.sort = this.sort;
	}

	reload() {
		this.service.loadContexts((data: Context[]) => this.contextsDatasource.data = data);
	}

	applyFilter(event: Event) {
		const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
		this.contextsDatasource.filter = filterValue;
	}

	showParamsDialog(context: Context): void {
		const dialogRef = this.dialog.open(ContextParamsDialog, {
			data: context.parameters,
			width: '80%'
		});
	}

}

@Component({
	selector: 'context-dialog',
	templateUrl: 'context-params-dialog.html',
	styleUrls: ['./contexts.component.css']
})
export class ContextParamsDialog {

	constructor(public dialogRef: MatDialogRef<ContextParamsDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
	}

	onNoClick(): void {
		this.dialogRef.close();
	}
}

@Component({
	selector: 'app-context-editor',
	templateUrl: './context-viewer.component.html',
	styleUrls: ['./contexts.component.css']
})
export class ContextViewerComponent implements OnInit {

	context?: Context
	categories: ContextNode[] = [];

	constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) {
	}

	ngOnInit() {
		this.route.queryParams.subscribe((params) => {
			this.service.loadContext(params['id'], (data: Context) => this.context = data);
			this.service.loadContextCategories(params['id'], (data: ContextNode[]) => this.categories = data);
		});
	}

	populateNode(level: number, node: ContextNode): void {
		this.service.loadContextConcepts(level, node.id, (data: ContextNode[]) => {
			node.populated = true;
			node.childs = data
		});
	}

	showParamsDialog(params: ContextParam[] | undefined): void {
		if (params) {
			this.dialog.open(ContextParamsDialog, {
				data: params,
				width: '80%'
			});
		}
	}

}