import { querySelectorAllDeep } from 'query-selector-shadow-dom';
import RuleService from "../domain/RuleService";
import ExplorationEvaluation from '../domain/ExplorationEvaluation';

const ENTERING_ACTIONS_CLASS = "aifex_evaluation_entering_action";
const CONTINUING_ACTIONS_CLASS = "aifex_evaluation_continuing_action";
const FINISHING_ACTIONS_CLASS = "aifex_evaluation_finishing_action";


export default class EvaluationActionsBorderView {

    show(ruleService: RuleService, evaluation: ExplorationEvaluation): void {
        this.clear();
        if (!evaluation) {
            return;
        }

        for (const action of evaluation.enteringInteractionList) {
            const matchingElementList = ruleService.actionToElements(action);
            for (const element of matchingElementList) {
                element.setAttribute("aifex_step_action", "entering")
            }
        }

        for (const action of evaluation.continuingActionList) {
            const matchingElementList = ruleService.actionToElements(action);
            for (const element of matchingElementList) {
                element.setAttribute("aifex_step_action", "continuing")
            }
        }

        for (const action of evaluation.finishingInteractionList) {
            const matchingElementList = ruleService.actionToElements(action);
            for (const element of matchingElementList) {
                element.setAttribute("aifex_step_action", "finishing")
            }
        }
    }

    hide() {
        this.clear();
    }

    private clear() {
        const elements = querySelectorAllDeep("[aifex_step_action]");
        for (const element of elements) {
            element.removeAttribute("aifex_step_action");
        }
    }
}