const editModeButton = document.querySelector("#activateEditModeButton");
let flag = 0;
console.log("flag beofre event listener is:",flag);
let editState = "edit";
editModeButton.addEventListener("click", (e) => {
    flag += 1;
    console.log("THE GENERAL FLAG IS:",flag);
    let allPTagsInsideModal = mainDiv.querySelectorAll("p");
    if(e.target.tagName === "BUTTON") {
        let button = e.target;
        if(flag === 1) {
             console.log("the flag is now",flag);
            allPTagsInsideModal.forEach(p => {
                p.addEventListener("click" , e => {

                    let currentBoxNumber = e.target.parentNode;
                    console.log("THE DIV:",currentBoxNumber);
                    //getting ref to which p tag i clicked on
                    let toolToEdit = e.target;

                    let input = document.createElement("input");
                    input.type = "text";
                    input.value = toolToEdit.textContent;

                    //setting the id of the input we created to the id of the p tag i clicked on
                    input.id = toolToEdit.id;
                    input.className = toolToEdit.className;
                    console.log("does it work?",input.className);


                    console.log(input.className);
                    //inserting the input tag in place of the p tag i clicked on.
                    currentBoxNumber.insertBefore(input,toolToEdit);
                    currentBoxNumber.removeChild(toolToEdit);
                    button.textContent = "שמור";
                    console.log("the flag is still in edit mode");

                });
            });
        } else if(flag === 2) {
             console.log("it is SAFE MODE, THE FLAG IS NOW:",flag);
            //getting ref to all the inputs that exists in the modal after we pressed on edit.
            let allInputsInModal = mainDiv.querySelectorAll("input");
            //loop through each existing input
            allInputsInModal.forEach(input => {
                //getting ref to the parent div of the input which is the the box
                let currentBoxNumber = input.parentNode;
//                console.log(currentBoxNumber);
                let newInputTool = input;


                let updatedToolPTag = document.createElement("p");
                //setting the id of the new p element to be equal to the id of the input.
                updatedToolPTag.id = newInputTool.id;
                //i set the number of the updatedTool to be equal to the input in order to save the updatedTool with the same number field in storage.

                updatedToolPTag.className = newInputTool.className;
                updatedToolPTag.innerHTML = newInputTool.value;
                console.log("my id is:",updatedToolPTag.id);
                console.log("the name has been changed to:",updatedToolPTag.innerHTML);
                let currentName = updatedToolPTag.innerHTML;
                let currentBox = currentBoxNumber.className;
                //getting just the number of the box in order to pass it to be saved in the storage.
                let getJustTheBoxNum = parseInt(currentBox.slice(4));

                console.log("TYPE OF CLASSNAME",typeof updatedToolPTag.className);
            Store.editToolFromModal(updatedToolPTag.id,currentName,getJustTheBoxNum,parseInt(updatedToolPTag.className));
                //inserting the updated p tag in place of the input after i click on the save.
//                Store.editToolFromModal(newInputTool.id,updatedToolPTag.name)
                currentBoxNumber.insertBefore(updatedToolPTag,newInputTool);
                currentBoxNumber.removeChild(newInputTool);
                button.textContent = "הפעל מצב עריכה";
                flag = 1

            });

        } else {
            flag = 1
            console.log("IM IN THE ELSE RIGHT NOW, THE FLAG IS",flag);
            return;


        }
    }
});