import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ActivatedRoute, Router } from '@angular/router';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
import { GrantListingModel } from '@app/core/model/grant/grant-listing';
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
import { DmpService } from '@app/core/services/dmp/dmp.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpCriteriaComponent } from '@app/ui/dmp/listing/criteria/dmp-criteria.component';
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core';
import { Observable, of as observableOf } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { GrantService } from "@app/core/services/grant/grant.service";
import { DmpUploadDialogue } from './upload-dialogue/dmp-upload-dialogue.component';
import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
import { isNullOrUndefined } from 'util';
import { AuthService } from '@app/core/services/auth/auth.service';
import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';


@Component({
	selector: 'app-dmp-listing-component',
	templateUrl: 'dmp-listing.component.html',
	styleUrls: ['./dmp-listing.component.scss'],
})
export class DmpListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {

	@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
	@ViewChild(MatSort, { static: false }) sort: MatSort;
	// @ViewChild(DmpCriteriaComponent, { static: true }) criteria: DmpCriteriaComponent;

	breadCrumbs: Observable<BreadcrumbItem[]> = observableOf([{ parentComponentName: null, label: 'DMPs', url: "/plans" }]);
	itemId: string;
	grantId: string;
	showGrant: boolean;
	titlePrefix: string;
	totalCount: number;
	listingItems: DmpListingModel[] = [];
	allVersions: boolean = false;
	groupLabel: string;
	isPublic: boolean = false;
	public isVisible = true

	startIndex: number = 0;
	pageSize: number = 5;

	criteria: DmpCriteria;

	constructor(
		private dmpService: DmpService,
		private router: Router,
		private route: ActivatedRoute,
		public dialog: MatDialog,
		public enumUtils: EnumUtils,
		private language: TranslateService,
		private grantService: GrantService,
		private uiNotificationService: UiNotificationService,
		private authService: AuthService
	) {
		super();
	}

	ngOnInit() {
		this.isPublic = this.router.url.startsWith('/explore-plans');
		if (!this.isPublic && isNullOrUndefined(this.authService.current())) {
			this.router.navigateByUrl("/explore-plans");
		}
		this.route.params
			.pipe(takeUntil(this._destroyed))
			.subscribe(async params => {
				let grantLabel;
				if (params['grantId']) {
					this.grantId = params['grantId'];
					this.showGrant = true;
					this.grantService.getSingle(this.grantId)
						.subscribe((grant: GrantListingModel) => {
							// const grant: GrantListingModel = {
							// 	id: this.grantId
							// }
							// this.breadCrumbs = Observable.of([{ parentComponentName: 'GrantEditorComponent', label: grantLabel, url: '/grants/edit/' + this.grantId }]);
							grantLabel = this.route.snapshot.queryParams.grantLabel;

							this.criteria = { like: null, grants: [grant], groupIds: null, allVersions: false }
							// this.criteria.setCriteria({ like: null, grants: [grant], groupIds: null, allVersions: false });

							this.refresh();
							// this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
						})

				} else if (params['groupId']) {
					this.itemId = params['groupId'];
					this.showGrant = true;
					const breadCrumbs = [];
					this.allVersions = true;

					this.language.get('NAV-BAR.MY-DMPS').pipe(takeUntil(this._destroyed)).subscribe(x => {
						this.breadCrumbs = observableOf([
							{
								parentComponentName: null,
								label: x,
								url: '/plans'
							}]
						);
					})
					this.groupLabel = this.route.snapshot.queryParams.groupLabel;

					// this.criteria.setCriteria(this.getDefaultCriteria());
					this.criteria = this.getDefaultCriteria();
					this.refresh();
					// this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
				} else {
					this.itemId = params['groupId'];
					this.showGrant = true;
					const breadCrumbs = [];

					// if (this.itemId) {
					// 	const dmplabel = this.route.snapshot.queryParams.groupLabel;
					// 	breadCrumbs.push({
					// 		parentComponentName: null,
					// 		label: this.language.instant('NAV-BAR.DMPS'),
					// 		url: '/plans'
					// 	});
					// }
					// else

					this.language.get('NAV-BAR.MY-DMPS').pipe(takeUntil(this._destroyed)).subscribe(x => {
						this.breadCrumbs = observableOf([
							{
								parentComponentName: null,
								label: x,
								url: '/plans'
							}]
						);
					})
					// this.criteria.setCriteria(this.getDefaultCriteria());
					this.criteria = this.getDefaultCriteria();
					this.refresh();
					// this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
				}

				if (this.grantId != null) {
					if (grantLabel !== undefined) {
						this.titlePrefix = 'for ' + grantLabel;
					}
				}

			});
	}

	public refresh(resetPages = false) {
		// if (this._paginator.pageSize === undefined) this._paginator.pageSize = 10;
		// if (resetPages) this._paginator.pageIndex = 0;
		// const startIndex = this._paginator.pageIndex * this._paginator.pageSize;

		let fields: Array<string> = new Array();
		// if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
		fields.push('-modified');

		const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
		request.criteria = this.criteria;

		this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
			if (!result) { return []; }
			result.data.map(item => {
				item['datasets'].map(dmp => {
					dmp.url = 'datasets/edit/' + dmp.url;
					dmp.all = 'datasets/dmp/' + item.id;
					return dmp;
				});
				return item;
			});
			this.listingItems = result.data;
			this.totalCount = result.totalCount;
		});
	}

	public loadMore() {
		this.startIndex = this.startIndex + this.pageSize;
		const fields: Array<string> = ["-modified"];
		const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
		request.criteria = this.criteria;

		this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
			if (!result) { return []; }
			result.data.map(item => {
				item['datasets'].map(dmp => {
					dmp.url = 'datasets/edit/' + dmp.url;
					dmp.all = 'datasets/dmp/' + item.id;
					return dmp;
				});
				return item;
			});
			this.listingItems = this.listingItems.concat(result.data);
		});
	}

	pageThisEvent(event) {
		this.refresh();
	}

	// rowClicked(dmp: DmpListingModel) {
	// 	this.router.navigate(['/plans/overview/' + dmp.id]);
	// }

	public closeCard(): void {
		this.isVisible = false;
	}

	addDataset(rowId: String) {
		this.router.navigate(['/datasets/new/' + rowId]);
	}

	showDatasets(rowId: String, rowLabel: String) {
		this.router.navigate(['/datasets/dmp/' + rowId, { dmpLabel: rowLabel }]);
	}

	viewVersions(rowId: String, rowLabel: String) {
		this.router.navigate(['/plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
	}

	getDefaultCriteria(): DmpCriteria {
		const defaultCriteria = new DmpCriteria();
		return defaultCriteria;
	}

	openShareDialog(rowId: any, rowName: any) {
		const dialogRef = this.dialog.open(DmpInvitationDialogComponent, {
			data: {
				dmpId: rowId,
				dmpName: rowName
			}
		});
	}

	fileSave(event) {
		const dialogRef = this.dialog.open(DmpUploadDialogue, {
			data: {
				fileList: FileList,
				success: Boolean,
				dmpTitle: String
			}
		});
		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
			if (result && result.success) {
				this.dmpService.uploadXml(result.fileList, result.dmpTitle, result.dmpProfiles)
					.pipe(takeUntil(this._destroyed))
					.subscribe((complete) => this.onCallbackImportComplete(),
						(error) => this.onCallbackImportFail(error.error));
			}
		});
	}

	private onCallbackImportComplete() {
		this.uiNotificationService.snackBarNotification(this.language.instant('DMP-UPLOAD.UPLOAD-SUCCESS'), SnackBarNotificationLevel.Success);
		this.router.navigate(['/reload']).then(() => this.isPublic ? this.router.navigate(['/explore-plans']) : this.router.navigate(['/plans']));
	}

	private onCallbackImportFail(error: any) {
		this.uiNotificationService.snackBarNotification(error.message, SnackBarNotificationLevel.Error);
	}

	openFiltersDialog(): void {
		const dialogRef = this.dialog.open(DmpCriteriaDialogComponent, {
			width: '456px',
			height: '100%',
			restoreFocus: false,
			data: {
				showGrant: this.showGrant,
				isPublic: this.isPublic,
				criteria: this.criteria,
				// criteria: this.grantId ? this.criteria : this.getDefaultCriteria(),
				updateDataFn: this.updateDataFn.bind(this)
			},
			position: { right: '0px;' }
		});

		dialogRef.afterClosed().subscribe(result => {
		});
	}

	updateDataFn(criteria: DmpCriteriaComponent): void {
		this.toDmpCriteria(criteria);
		this.refresh();
	}

	toDmpCriteria(criteria: DmpCriteriaComponent): void {
		let formGroup = criteria.formGroup;
		this.criteria = {
			like: formGroup.get('like').value,
			grants: formGroup.get('grants').value,
			role: formGroup.get('role').value
		}
		this.criteria.status = formGroup.get('status').value;
		if (formGroup.get('status').value == 2) {
			this.criteria.isPublic = true;
		} else {
			this.criteria.isPublic = false;
		}
		this.criteria.onlyPublic = this.isPublic;
		if (this.isPublic) {
			this.criteria.isPublic = true;
		}
		if (formGroup.get('datasetTemplates').value)
			this.criteria.datasetTemplates = formGroup.get('datasetTemplates').value.map(x => x.id);
		if (formGroup.get('collaborators').value)
			this.criteria.collaborators = formGroup.get('collaborators').value.map(x => x.id);
		if (formGroup.get('organisations').value)
			this.criteria.organisations = formGroup.get('organisations').value.map(x => x.id);
		if (this.itemId) {
			this.criteria.groupIds = [this.itemId];
			this.criteria.allVersions = true;
		}
		this.criteria.grantStatus = formGroup.get('grantStatus').value;
	}

	hasScrollbar(): boolean {
		return document.getElementById("main-page").scrollHeight > document.documentElement.clientHeight;
	}
}

// export class DmpDataSource extends DataSource<DmpListingModel> {

// 	totalCount = 0;

// 	constructor(
// 		private _service: DmpService,
// 		private _paginator: MatPaginator,
// 		private _sort: MatSort,
// 		private _criteria: DmpCriteriaComponent,
// 		private itemId
// 	) {
// 		super();
// 	}

// 	connect(): Observable<DmpListingModel[]> {
// 		const displayDataChanges = [
// 			this._paginator.page
// 		];

// 		return Observable.merge(...displayDataChanges)
// 			.startWith(null)
// 			.switchMap(() => {
// 				const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
// 				let fields: Array<string> = new Array();
// 				if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
// 				const request = new DataTableRequest<DmpCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
// 				request.criteria = this._criteria.formGroup.value;
// 				if (this.itemId) {
// 					request.criteria.groupIds = [this.itemId];
// 					request.criteria.allVersions = true;
// 				}
// 				return this._service.getPaged(request, "listing");
// 			})
// 			/*.catch((error: any) => {
// 			  this._snackBar.openFromComponent(SnackBarNotificationComponent, {
// 				data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
// 				duration: 3000,
// 				extraClasses: ['snackbar-warning']
// 			  });
// 			  return Observable.of(null);
// 			})*/
// 			.map(result => {
// 				result.data = result.data;
// 				return result;
// 			})
// 			.map(result => {
// 				return result;
// 			})
// 			.map(result => {
// 				if (!result) { return []; }
// 				if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
// 				return result.data.map(item => {
// 					item['datasets'].map(dmp => {
// 						dmp.url = 'datasets/edit/' + dmp.url;
// 						dmp.all = 'datasets/dmp/' + item.id;
// 						return dmp;
// 					});
// 					return item;
// 				});
// 			});
// 	}

// 	disconnect() {
// 	}
// }