import { Component, Inject, Input, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
import { DOCUMENT } from '@angular/common';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LocalStorageService } from 'ngx-webstorage';
import { ToastService } from '../../../../../../core/services/toast.service';
import { StorageService } from '../../../../../../core/services/storage.service';

@Component({
	selector: 'app-day-list',
	templateUrl: './day-list.component.html',
	styleUrls: ['./day-list.component.scss'],
})
export class DayListComponent {
	@Input()
	form: FormGroup;
	@Input()
	public dateList: Array<any> = [];
	@Input()
	public hasSeveralHours: boolean;
	timeList: any;
	display = false;

	constructor(
		private toastService: ToastService,
		@Inject(DOCUMENT) private document: any,
		private storageService: StorageService
	) {
		this.setDemoValues();
	}

	reinitChoices(): void {
		this.dateList = [];
	}

	setDemoValues(): void {
		this.addChoice('orange');
		this.addChoice('raisin');
		this.addChoice('abricot');
	}
	dropDayItem(event: any): void {
		// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
		if (event.previousContainer === event.container) {
			moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
		} else {
			transferArrayItem(
				event.previousContainer.data,
				event.container.data,
				event.previousIndex,
				event.currentIndex
			);
		}
	}

	/**
	 * add a time period to a specific date choice,
	 * focus on the new input
	 * @param config
	 * @param id
	 */
	addTimeToDate(config: any, id: number) {
		this.timeList.push({
			literal: '',
		});
		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (this.timeList.length - 1) + '"]';
		// this.cd.detectChanges();
		const elem = this.document.querySelector(selector);
		if (elem) {
			elem.focus();
		}
	}

	/**
	 * handle keyboard shortcuts
	 * @param $event
	 * @param choice_number
	 */
	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
		$event.preventDefault();

		console.log('this. dateChoices.length', this.dateList.length);
		console.log('choice_number', choice_number);
		const lastChoice = this.dateList.length - 1 === choice_number;
		// TODO handle shortcuts
		// reset field with Ctrl + D
		// add a field with Ctrl + N
		// go to previous choice with arrow up
		// go to next choice with arrow down
		console.log('$event', $event);

		if ($event.ctrlKey && $event.key == 'ArrowUp' && choice_number > 0) {
			this.focusOnChoice(choice_number - 1);
		}
		if ($event.ctrlKey && ($event.key == 'ArrowDown' || $event.key == 'ArrowRight')) {
			// add a field if we are on the last choice
			if (lastChoice) {
				this.addChoice();
				this.toastService.display('choix ajouté par raccourci "flèche bas"');
			} else {
				this.focusOnChoice(choice_number + 1);
			}
		}
		if ($event.ctrlKey && $event.key == 'Backspace') {
			this.deleteChoiceField(choice_number);
			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
			// this.cd.detectChanges();
			this.focusOnChoice(Math.min(choice_number - 1, 0));
		}
		if ($event.ctrlKey && $event.key == 'Enter') {
			// go to other fields
			const elem = this.document.querySelector('#creatorEmail');
			if (elem) {
				elem.focus();
			}
		}
	}

	addChoice(optionalLabel = ''): void {
		this.storageService.dateChoices.push({
			literal: '',
			timeList: [],
			date_object: new Date(),
		});

		// this.cd.detectChanges();

		this.focusOnChoice(this.storageService.dateChoices.length - 1);
	}

	focusOnChoice(index): void {
		const selector = '#choice_label_' + index;
		const elem = this.document.querySelector(selector);
		if (elem) {
			elem.focus();
		}
	}

	deleteChoiceField(index: number): void {
		if (this.dateList.length !== 1) {
			this.dateList.splice(index, 1);
		}
	}

	openKeyboardShortcutsModal() {
		this.display = true;
	}
}