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

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

@Component({
    selector: 'framadate-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() {
    }

    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: '',
                file: '',
                url: ''
            });
        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();
    }
}