import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Component, Input, OnInit } from '@angular/core';
import { FormArray } from '@angular/forms';
import { DmpUserRole } from '@app/core/common/enum/dmp-user-role';
import { DmpUserType } from '@app/core/common/enum/dmp-user-type';
import { DmpBlueprintDefinitionSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
import { UserService } from '@app/core/services/user/user.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { DmpEditorModel, DmpUserEditorModel } from '../dmp-editor-blueprint/dmp-editor.model';

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

	@Input() form;
	@Input() validationErrorModel: ValidationErrorModel;
	@Input() label: string = null;
	@Input() required: boolean = false;
	@Input() placeholder: string;
	@Input() sections: DmpBlueprintDefinitionSection[] = null;
	@Input() initializeUsers: boolean = false;

	@Input() enableSorting: boolean = true;
	hoveredUser:number = -1;

	dmpUserTypeEnum = DmpUserType;
	dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType);
	dmpUserRoleEnumValues = this.enumUtils.getEnumValues<DmpUserRole>(DmpUserRole);

	multipleAutoCompleteSearchConfiguration: MultipleAutoCompleteConfiguration;


	constructor(
		public enumUtils: EnumUtils,
		public userService: UserService
	) { super(); }

	ngOnInit() {
		console.log('sorting mode: ', this.enableSorting);
		if(this.initializeUsers) {
			this.addUser();
		}
	}

	addUser(): void {
		const userArray = this.form.get('users') as FormArray;
		const dmpUser: DmpUserEditorModel = new DmpUserEditorModel(this.validationErrorModel);
		userArray.push(dmpUser.buildForm({ rootPath: "users[" + userArray.length + "]." }));
	}

	removeUser(userIndex: number): void {
		(this.form.get('users') as FormArray).removeAt(userIndex);

		DmpEditorModel.reApplyPropertiesValidators(
			{
				formGroup: this.form,
				validationErrorModel: this.validationErrorModel
			}
		);
		this.form.get('users').markAsDirty();
	}

	//
	//
	// Users
	//
	//

	dropUsers(event: CdkDragDrop<string[]>) {
		const usersFormArray = (this.form.get('users') as FormArray);

		moveItemInArray(usersFormArray.controls, event.previousIndex, event.currentIndex);
		usersFormArray.updateValueAndValidity();

		DmpEditorModel.reApplyPropertiesValidators(
			{
				formGroup: this.form,
				validationErrorModel: this.validationErrorModel
			}
		);
		this.form.get('users').markAsDirty();
	}

	isUserSelected(userId: number): boolean {
		return this.hoveredUser === userId;
	}

	onUserHover(userIndex: number): void {
		if (this.enableSorting === false) return;

		this.hoveredUser = userIndex;
	}

	clearHoveredUser(): void {
		this.hoveredUser = -1;
	}
}