import ExplorationEvaluation from "../domain/ExplorationEvaluation";
import Interface4ViewManager from "../application/Interface4ViewManager";
import Action from "../domain/Action";

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()
            this.section = undefined;
        }
    }

    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 = "Evaluation :"

        this.body.appendChild(stepHeader);

        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 = "Validated";
            stepsStatusDiv.appendChild(span);
        }
        for (const step of evaluation.notValidatedStepList) {
            const span = document.createElement("span");
            span.classList.add("aifex-not-validated-step");
            span.textContent = "Not validated";
            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 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 = this.createActionTextForEvaluationView(action);
            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 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 = this.createActionTextForEvaluationView(action);
            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 with one of these actions:`
            this.finishingActionDiv.appendChild(finishingActionHeader);
        }
        evaluation.finishingInteractionList.forEach(action => {
            const finishingInterationSpan = document.createElement("span");
            finishingInterationSpan.classList.add("finishingActionText")
            finishingInterationSpan.innerText = this.createActionTextForEvaluationView(action);
            this.finishingActionDiv.appendChild(finishingInterationSpan);
        });
    }

    private createActionTextForEvaluationView(action: Action) {
        if (action.prefix === "*") {
            return "Any action";
        } else {
            return action.toString();
        }
    }

}