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';

@Component({
	selector: 'app-day-list',
	templateUrl: './day-list.component.html',
	styleUrls: ['./day-list.component.scss'],
})
export class DayListComponent implements OnInit {
	@Input()
	public dateList: DateChoice[] = [];
	@Input()
	public hasSeveralHours: boolean;
	timeList: any;

	constructor(@Inject(DOCUMENT) private document: any) {}

	ngOnInit(): void {}

	dropTimeItem(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
			);
		}
	}

	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 + '_Choices_' + (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.choices.length', this.choices.length);
		console.log('choice_number', choice_number);
		const lastChoice = this.choices.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.key == 'ArrowUp' && choice_number > 0) {
			this.focusOnChoice(choice_number - 1);
		}
		if ($event.key == 'ArrowDown') {
			// 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();
			}
		}
	}
}