<!DOCTYPE html>
<html lang="en">
    <head>
        <% include ../partials/head %>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script>
        <script src="/static/monaco.js"></script>
    </head>
    <body>
        <% include ../partials/nav %>
        <% if (firstWebSite) { %>
            <% include ./firstWebSiteModal %>
        <% } %>
        <div class="container">
            <div class="jumbotron">
                <h1 class="display-4">AIFEX </h1>
                <p class="lead">Improve the quality, efficiency and diversity of your exploratory test sessions</p>
                <hr class="my-4"></hr>
                <h2>Create a new WebSite <a href="/documentation-website" target="_blank"><i class="fas fa-question-circle"></i></a></h2>
                <% if (errorMessage) { %>
                    <div class="alert alert-danger" role="alert">
                        Error : <%= errorMessage %>
                    </div>
                <% } %>
                <form onsubmit="return validation(event)" action="/dashboard/website/create" method="post" encType="multipart/form-data" id="form-container">
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label">Name</label>
                        <div class="col-sm-10">
                            <% if (webSite) { %>
                                <input type="text" class="form-control" name="name" id="name" value="<%=webSite.name %>" required>
                            <%} else { %>
                                <input type="text" class="form-control" name="name" id="name" value="Google_Sample" required>
                            <% } %>
                            
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="url" class="col-sm-2 col-form-label">URL</label>
                        <div class="col-sm-10">
                            <% if (webSite) { %>
                                <input type="text" class="form-control" name="url" id="url" value="<%= webSite.url %>">
                            <%} else { %>
                                <input type="text" class="form-control" name="url" id="url" value="https://www.google.fr/" required>
                            <% } %>
                        </div>
                    </div>
                
                    <div class="form-group row">
                        <label for="mappingList" class="col-sm-2 col-form-label">mappingList</label>
                        <div class="col-sm-10" style="resize: vertical;overflow: auto;height:400px;border:1px solid grey"
                            id="monaco" htmlFormId="form-container" formFieldName="mappingList" >
                            <div id="monaco-code" formEditor style="display: none;">
                                <% if (webSite) { %><%-webSite.mappingList%>
                                <%} else { %>
                               [
                                    {
                                        "match": {
                                            "css": "body",
                                            "event": "click"
                                        },
                                        "output": {
                                            "prefix": "ClickOn",
                                            "suffix": "cssSelector"
                                        }

                                    },
                                    {
                                        "match": {
                                            "css": "#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input",
                                            "event": "change"
                                        },
                                        "output": {
                                            "prefix": "Search",
                                            "suffix": "value"
                                        }
                                    },
                                    {
                                        "match": {
                                            "xpath": "//*[@id='rso']/div/div",
                                            "event": "click"
                                        },
                                        "output": {
                                            "prefix": "Open",
                                            "suffix": "index"
                                        }
                                    }
                                ]
                                <% } %>
                            </div>
                        </div>
                    </div>

                   <!-- <h3>Steps</h2>
                    <input id="stepList" name="stepList" type="hidden">
                    <button id="addStepButton" class="btn btn-primary" type="button">Add Step</button>
                    <div id="step_group"></div>
                    -->
                    <button type="submit" class="btn btn-primary">Create</button>
                </form>
            </div>
        </div>

        <% if (firstWebSite) { %>
            <script>
            $(document).ready(function(){
                $("#exampleModal").modal('show');
            });
            </script>
            <% } %>
        
            <script>
                document.getElementById("monaco-code").addEventListener("change", (e) => updateActionList(e.value))
                let stepLength = 0;
                let actionList = [];
                document.getElementById("addStepButton").addEventListener("click", addStep);
                
                function addStep() {
                    stepLength++;
                    const stepGroup = document.getElementById("step_group");
                    const stepDiv = document.createElement("div");

                    stepDiv.classList.add("form-group");
                    stepGroup.appendChild(stepDiv);

                    const stepTitle = document.createElement("h5");
                    stepTitle.textContent = `Step ${stepLength}`
                    stepDiv.appendChild(stepTitle);

                    const stepLabelName = document.createElement("label");
                    stepLabelName.classList.add(["col-sm-2", "col-form-label"]);
                    stepLabelName.textContent = `name`
                    stepDiv.appendChild(stepLabelName);
                    
                    const stepNameInput = document.createElement("input");
                    stepNameInput.setAttribute("required", true);
                    stepNameInput.setAttribute("stepName", stepLength)
                    stepNameInput.setAttribute("type", "text");
                    stepNameInput.classList.add("form-control");
                    stepDiv.appendChild(stepNameInput);

                    const stepLabelContent = document.createElement("label");
                    stepLabelContent.classList.add(["col-sm-2", "col-form-label"]);
                    stepLabelContent.textContent = `Content`
                    stepDiv.appendChild(stepLabelContent);

                    const selectActionGroup = document.createElement("div");
                    selectActionGroup.classList.add("input-group");
                    const selectPrependGroup = document.createElement("div");
                    selectActionGroup.appendChild(selectPrependGroup)
                    selectPrependGroup.classList.add("input-group-prepend");
                    const spanAddAction = document.createElement("span");
                    spanAddAction.classList.add("input-group-text");
                    spanAddAction.textContent = "+";
                    spanAddAction.setAttribute("step", stepLength);
                    selectPrependGroup.appendChild(spanAddAction);

                    const selectAction = document.createElement("select");
                    selectAction.classList.add("form-control");
                    selectAction.setAttribute("actionSelect", stepLength);
                    selectActionGroup.appendChild(selectAction);
                    actionList.forEach(action => {
                            const option = document.createElement("option");
                            option.value = action;
                            option.text = action;
                            selectAction.appendChild(option);
                    })
                    stepDiv.appendChild(selectActionGroup);
                    spanAddAction.addEventListener("click", addActionToStep);                    

                    const stepTextArea = document.createElement("textarea");
                    stepTextArea.setAttribute("step", stepLength)
                    stepTextArea.classList.add("form-control");
                    stepDiv.appendChild(stepTextArea);
                }
                

                function updateActionList(code) {
                    try {
                        const codeJSON = JSON.parse(code);
                        actionList = codeJSON.map(rule => rule.output.prefix);
                        const selects = document.querySelectorAll("[actionselect]");
                        for (const select of selects) {
                            while(select.hasChildNodes()) {
                                select.firstChild.remove();
                            }
                            actionList.forEach(action => {
                            const option = document.createElement("option");
                            option.value = action;
                            option.text = action;
                            select.appendChild(option);
                    })                        }
                    } catch(e) {}                    
                }

                function addActionToStep(e) {
                    const button = e.target;
                    const stepNumber = button.getAttribute("step")
                    const action = document.querySelector(`[actionSelect="${stepNumber}"]`).value;
                    const value = document.querySelector(`textarea[step="${stepNumber}"]`).value
                    
                    document.querySelector(`textarea[step="${stepNumber}"]`).value = `${value} ${action}`
                }

                function validation(e) {
                    if (stepLength === 0) {
                        return true;
                    }
                    const steps = [];
                    try {
                        for (let i = 1; i <= stepLength; i++) {
                            if (!document.querySelector(`[stepName="${i}"]`)) {
                                continue;
                            }
                            const name = document.querySelector(`[stepName="${i}"]`).value;
                            const value = document.querySelector(`textarea[step="${i}"]`).value;
                            steps.push({name, value});
                        }
                        document.getElementById("stepList").value = JSON.stringify(steps);
                    } catch(e) {
                        console.error(e)
                        return false;
                    }
                    return true;
                }
            </script>
       
    </body>

    
</html>