import ExplorationEvaluation from "../domain/ExplorationEvaluation";
import Interface4ViewManager from "../application/Interface4ViewManager";
import Question from "../../background/domain/Question";

const EVALUATION_SECTION = "AIFEX_evaluationSection";
const EVALUATION_SECTION_HEADER = "AIFEX_evaluationSectionHeader";
const EVALUATION_SECTION_BODY = "AIFEX_evaluationSectionBody";

const ENTERING_QUESTION_DIV = "AIFEX_question_action";
const ENTERING_ACTION_DIV = "AIFEX_entering_action";
const CONTINUING_ACTION_DIV = "AIFEX_continuing_action";
const FINISHING_ACTION_DIV = "AIFEX_finishing_action";

export default class EvaluationView {

    private _application: Interface4ViewManager;
    private header: HTMLElement;
    private body: HTMLElement;
    private section: HTMLElement;
    private questionDiv: HTMLElement;
    private enteringActionDiv: HTMLElement;
    private continuingActionDiv: HTMLElement;
    private finishingActionDiv: HTMLElement;


    constructor(_application) {
        this._application = _application;
    } 

    clear() {
        if (this.section) {
            this.section.remove()
        }
    }

    hide() {
        const commentSection = document.getElementById(EVALUATION_SECTION)
        commentSection.hidden = true;
    }

    show(parent: HTMLElement, evaluation: ExplorationEvaluation) {
        if (!this.section) {
            this.section = document.createElement("div");
            this.section.setAttribute("id", EVALUATION_SECTION);
    
            this.header = document.createElement("div")
            this.header.setAttribute("id", EVALUATION_SECTION_HEADER);
    
            this.body = document.createElement("div")
            this.body.setAttribute("id", EVALUATION_SECTION_BODY);
    
            this.section.appendChild(this.header)
            this.section.appendChild(this.body)
            parent.appendChild(this.section)
        }
        while(this.body.hasChildNodes()) {
            this.body.firstChild.remove()
        }

        

        const stepHeader = document.createElement("h1");
        stepHeader.classList.add("user-view-header");
        stepHeader.innerText = "Steps :"

        this.body.appendChild(stepHeader);

        this.showQuestions(evaluation);

        if (evaluation.notValidatedStepList.length === 0) {
            const allStepsFinished = document.createElement("span");
            allStepsFinished.innerText = "You have finished all the steps.";
            this.body.appendChild(allStepsFinished);
        } else {
            const stepsRemaining = document.createElement("span");
            stepsRemaining.innerText = "Finish all the steps to publish your exploration.";
            this.body.appendChild(stepsRemaining);
        }

        const stepsStatusDiv = document.createElement("div");
        stepsStatusDiv.id= "AIFEX_steps_status_group";
        for (const step of evaluation.validatedStepList) {
            const span = document.createElement("span");
            span.classList.add("aifex-validated-step");
            span.textContent = step.name;
            stepsStatusDiv.appendChild(span);
        }
        for (const step of evaluation.notValidatedStepList) {
            const span = document.createElement("span");
            span.classList.add("aifex-not-validated-step");
            span.textContent = step.name;
            stepsStatusDiv.appendChild(span);
        }
        this.body.appendChild(stepsStatusDiv);

        this.enteringActionDiv = document.createElement("div");
        this.enteringActionDiv.id = ENTERING_ACTION_DIV;
        this.body.appendChild(this.enteringActionDiv);
        if (evaluation.enteringInteractionList.length > 0) {
            const enteringHeader = document.createElement("div");
            enteringHeader.classList.add("evaluation-step-header");
            enteringHeader.innerText = `Start the step "${evaluation.notValidatedStepList[0].name}" with :`;
            this.enteringActionDiv.appendChild(enteringHeader);
        }
        evaluation.enteringInteractionList.forEach(action => {
            const enteringInteractionSpan = document.createElement("span");
            enteringInteractionSpan.classList.add("enteringActionText")
            enteringInteractionSpan.classList.add("aifex_stepAction")

            enteringInteractionSpan.innerText = action.toString();
            this.enteringActionDiv.appendChild(enteringInteractionSpan);
        });

        this.continuingActionDiv = document.createElement("div");
        this.continuingActionDiv.id = CONTINUING_ACTION_DIV;
        this.body.appendChild(this.continuingActionDiv);
        if (evaluation.continuingActionList.length > 0) {
            const continuingHeader = document.createElement("div");
            continuingHeader.classList.add("evaluation-step-header");
            continuingHeader.innerText = `Continue "${evaluation.notValidatedStepList[0].name}" with one of these actions:`
            this.continuingActionDiv.appendChild(continuingHeader);
        }
        evaluation.continuingActionList.forEach(action => {
            const continuingInteractionSpan = document.createElement("span");
            continuingInteractionSpan.classList.add("continuingActionText");
            continuingInteractionSpan.classList.add("aifex_stepAction")

            continuingInteractionSpan.innerText = action.toString();
            this.continuingActionDiv.appendChild(continuingInteractionSpan);
        });

        this.finishingActionDiv = document.createElement("div");
        this.finishingActionDiv.id = FINISHING_ACTION_DIV;
        this.body.appendChild(this.finishingActionDiv);
        if (evaluation.finishingInteractionList.length > 0) {
            const finishingActionHeader = document.createElement("div");
            finishingActionHeader.classList.add("evaluation-step-header");
            finishingActionHeader.classList.add("aifex_stepAction")

            finishingActionHeader.innerText = `Finish "${evaluation.notValidatedStepList[0].name}" with one of these actions:`
            this.finishingActionDiv.appendChild(finishingActionHeader);
        }
        evaluation.finishingInteractionList.forEach(action => {
            const finishingInterationSpan = document.createElement("span");
            finishingInterationSpan.classList.add("finishingActionText")
            finishingInterationSpan.innerText = action.toString();
            this.finishingActionDiv.appendChild(finishingInterationSpan);
        });


    }

    private showQuestions(evaluation: ExplorationEvaluation) {
        this.questionDiv = document.createElement("div");
        this.questionDiv.id = ENTERING_QUESTION_DIV;
        this.body.appendChild(this.questionDiv);
        if (evaluation.questionList.length > 0) {
            const questionHeader = document.createElement("h1");
            questionHeader.classList.add("user-view-header");

            questionHeader.id = "questionheader";
            this.questionDiv.appendChild(questionHeader);
            questionHeader.innerText = `Question${evaluation.questionList.length > 1?"s":""} (${evaluation.questionList.length})`;
        }

        evaluation.questionList.forEach(question => {
            const questionContent = document.createElement("div");
            const questionText = document.createElement("span");
            questionText.classList.add("questionText")
            questionText.innerText = question.text;
            const answerQuestionButtonGroup = document.createElement("div");
            answerQuestionButtonGroup.classList.add("aifex_question_group");

            const answerQuestionYes = document.createElement("button");
            answerQuestionYes.innerText = "Yes"
            answerQuestionYes.classList.add("answerQuestionButtonYes");
            answerQuestionYes.classList.add("aifex_question_button");
            answerQuestionYes.addEventListener("click", (e) => this.handleQuestionAnswer(question, true));
            answerQuestionButtonGroup.appendChild(answerQuestionYes);

            const answerQuestionNo = document.createElement("button");
            answerQuestionNo.innerText = "No"
            answerQuestionNo.classList.add("answerQuestionButtonNo");
            answerQuestionNo.classList.add("aifex_question_button");
            answerQuestionNo.addEventListener("click", (e) => this.handleQuestionAnswer(question, false));
            answerQuestionButtonGroup.appendChild(answerQuestionNo);

            questionContent.appendChild(questionText)
            questionContent.appendChild(answerQuestionButtonGroup)

            this.questionDiv.appendChild(questionContent);
        });
    }

    handleQuestionAnswer(question: Question, value: boolean) {
        this._application.pushAnswer(question, value);
    }

}