import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { DOCUMENT } from '@angular/common';
import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges } from '@angular/core';
import { FormArray } from '@angular/forms';
import { BaseComponent } from '@common/base/base.component';
import { Foo, ToCEntry, ToCEntryType } from '../table-of-contents-entry';

@Component({
	selector: 'app-dataset-profile-table-of-contents-internal-section',
	styleUrls: ['./table-of-contents-internal-section.scss'],
	templateUrl: './table-of-contents-internal-section.html'
})
export class DatasetProfileTableOfContentsInternalSection extends BaseComponent implements OnInit {

	@Input() links: ToCEntry[];
	@Output() itemClick = new EventEmitter<ToCEntry>();
	@Output() newEntry = new EventEmitter<ToCEntry>();
	@Output() removeEntry = new EventEmitter<ToCEntry>();

	@Output() createFooEntry = new EventEmitter<Foo>();

	@Output() dataNeedsRefresh = new EventEmitter<void>();



	@Input() parentLink: ToCEntry;
	@Input() itemSelected: ToCEntry;

	@Input() viewOnly: boolean;

	constructor(
		@Inject(DOCUMENT) private _document: Document) {
		super();
	}

	tocEntryType = ToCEntryType;

	ngOnInit(): void {

	}

	ngOnChanges(changes: SimpleChanges) {

	}

	itemClicked(item: ToCEntry) {
		//leaf node
		this.itemClick.emit(item);
	}

	deleteEntry(currentLink: ToCEntry){
		this.removeEntry.emit(currentLink);
	}

	createNewEntry(foo: Foo){
		this.createFooEntry.emit(foo);
	}

	tocEntryIsChildOf(testingChild: ToCEntry,parent: ToCEntry): boolean{

		if(!testingChild || !parent) return false;

		if(testingChild.id == parent.id){return true;}

		if(parent.subEntries){
			let childFound:boolean = false;

			parent.subEntries.forEach(subEntry=>{
				if(this.tocEntryIsChildOf(testingChild, subEntry)){
					childFound = true;
					return true;
				}
			})

			return childFound;
		}
		return false;
	}

	get selectedItemInLinks(){
		if(!this.links || !this.itemSelected) return false;

		const link = this.links.find(l=>l.id === this.itemSelected.id);

		if(link) return true;
		return false;
	}


	drop(event: CdkDragDrop<string[]>) {
		if(!this.links || !this.links.length) return;


		moveItemInArray(this.links, event.previousIndex, event.currentIndex);

		let arrayToUpdate: FormArray = this.links[0].form.parent as FormArray;
		// if(this.parentLink && this.parentLink.form){
		// 	switch(this.parentLink.subEntriesType){
		// 		case this.tocEntryType.Field: 
		// 			arrayToUpdate = (this.parentLink.form.get('fields') as FormArray);
		// 			break;
		// 		case this.tocEntryType.FieldSet: 
		// 			arrayToUpdate = (this.parentLink.form.get('fieldSets') as FormArray);
		// 			break;
		// 		case this.tocEntryType.Section: 
		// 			arrayToUpdate = (this.parentLink.form.get('sections') as FormArray);
		// 			break
		// 	}
			
		// }
		if(arrayToUpdate.controls){
			moveItemInArray(arrayToUpdate.controls, event.previousIndex, event.currentIndex);
			//update ordinality
			arrayToUpdate.controls.forEach((element,idx ) => {
				element.get('ordinal').setValue(idx);
				element.updateValueAndValidity();
			});
		}

		this.dataNeedsRefresh.emit();
		// moveItemInArray(this.links, event.previousIndex, event.currentIndex);

		// console.log('dropped');
	}

	onDataNeedsRefresh(){
		this.dataNeedsRefresh.emit();
	}
}