const component = document.getElementById("objectives-component");
const statusMessageDIV = document.getElementById("objectives-status-message");
const constraintListDIV = document.getElementById("constraint-list");


function renderObjectives (state) {
    if (state.explorationEvaluation) {
        statusMessageDIV.style.display = "none";
    } else {
        statusMessageDIV.style.display = "block";
    }
    while(component.hasChildNodes()) {
        component.removeChild(component.firstChild)
    }

    if (state.objectiveCheckList) {
        component.style.display = "block";
        const objectiveTable = document.createElement("table");
        objectiveTable.classList.add("table", "objective-panel")
        objectiveTableBody = document.createElement("tbody");

        component.appendChild(objectiveTable)
        objectiveTable.appendChild(objectiveTableBody);

        for (const objective of state.objectiveCheckList.objectiveList) {
            const objectiveTR = document.createElement("tr");
            objectiveTableBody.appendChild(objectiveTR);

            const nameTD = document.createElement("td");
            
            nameTD.innerText = objective.name;
            nameTD.classList.add("objective-name");
            objectiveTR.appendChild(nameTD)

            switch (objective.type) {
                case "length":
                    const minTD = document.createElement("td");
                    minTD.innerText = `Min: ${objective.minLength}`;
                    minTD.classList.add("objective-min-length");
                    objectiveTR.appendChild(minTD)

                    const maxTD = document.createElement("td");
                    maxTD.innerText = `Max: ${objective.maxLength}`;
                    maxTD.classList.add("objective-max-length");
                    objectiveTR.appendChild(maxTD)
                    break;

                case "pattern":
                    const NextTD = document.createElement("td");
                    NextTD.innerText = `Next: ${objective.nextActions[0].kind}`;
                    NextTD.classList.add("objective-pattern-next");
                    objectiveTR.appendChild(NextTD)

                    const placehold = document.createElement("td");
                    objectiveTR.appendChild(placehold);
                    break;
            }

            const statusTD = document.createElement("td");
            if (objective.status) {
                statusTD.innerText = "Valid"
                objectiveTR.classList.add("objective-validated");
                objectiveTR.append(statusTD)
            } else {
                statusTD.innerText = "Invalid"
                objectiveTR.classList.add("objective-not-validated");
                objectiveTR.append(statusTD)
            }
        }
    } else {
        component.style.display = "none";
    }
}