import { AfterViewInit, ChangeDetectorRef, Component, Inject, OnChanges, OnInit } from '@angular/core';
import { BaseComponent } from '../example/base-page/base.component';
import { ConfigService } from '../../services/config.service';

import { DOCUMENT } from '@angular/common';

@Component({
	selector: 'app-answers',
	templateUrl: './answers.component.html',
	styleUrls: ['./answers.component.scss'],
})
export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
	allAnswersAreValid = false;

	answerList = [];
	currentHeader: any = '';
	display: boolean;

	constructor(public config: ConfigService, @Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef) {
		super(config);
		this.answerList = this.config.answers;
	}

	// todo, manage validation of each page in a common way
	ngOnInit(): void {}

	ngOnChanges() {
		this.checkValidAnswers();
	}

	checkValidAnswers() {
		this.allAnswersAreValid = true;
		this.config.answers.forEach((answer) => {
			if (!answer.text.length) {
				this.allAnswersAreValid = false;
				return;
			}
		});
	}

	ngAfterViewInit() {
		this.focusOnAnswer(0);
		this.checkValidAnswers();
	}

	trackFunction(index: number, item: any): number {
		return item.id;
	}

	addAnswer() {
		this.config.answers.push({
			id: this.config.answers.length + 1,
			text: '',
			url: '',
			file: '',
			literal: '',
			date_object: null,
			timeList: [],
		});
		this.cd.detectChanges(); // to refresh the view before focusing on the new input
		this.focusOnAnswer(this.config.answers.length - 1);
	}

	focusOnAnswer(i) {
		const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer');
		const dom = AnswersDomToFocus[i];
		if (dom.focus) {
			dom.focus();
		}
		if (dom.select) {
			dom.select();
		}
	}

	navigateOrDelete(event: KeyboardEvent, i) {
		if (event.ctrlKey && event.key == 'd') {
			this.config.answers.splice(i, 1);
		}
		if (event.key == 'ArrowUp' && i > 0) {
			this.focusOnAnswer(i - 1);
		}
		if (event.key == 'ArrowDown' && i < this.config.answers.length) {
			this.focusOnAnswer(i + 1);
		}
	}

	showModalForPictureOfAnswer(answer) {
		// TODO
		this.currentHeader = answer;
		this.display = true;
		// this.config.todo();
	}
}