<!--
thisNode: dashboard expimp

falta corregir lo de labels y texts
-->
<div class="dashboard">
  <div style="text-align:center" class="export-import">
    <form style="display:flex; flex-flow:column;align-items:center;">
      <div class="space"></div>
      <div class="msgbox" style="position:relative;">
        <div data-id="butedit" class="btmiddleright"></div>
        <span></span>
        <script>
          const title=thisNode.getNextChild("titimp").getRelationship("siteelementsdata").getChild();
          title.writeProp(thisElement);
          //adding the edition pencil
          if (webuser.isWebAdmin()) {
            const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
            visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
            title.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement});
          }
         </script>
      </div>
      <div style="padding-top: 10px">
        <textarea name="impdata" rows="10" cols="50"></textarea>
      </div>
      <div>
        <div class="msgbox">
          <table style="margin:auto; text-align:left; margin-bottom:1em;">
            <tr>
              <td>
                <span style="position:relative;">
                  <input type="radio" value="menus" name="dataoption">
                  <div data-id="butedit" class="btmiddleright"></div>
                  <span></span>
                  <script>
                    const title=thisNode.getNextChild("chkgeneral").getRelationship("siteelementsdata").getChild();
                    title.writeProp(thisElement);
                    //adding the edition pencil
                    if (webuser.isWebAdmin()) {
                      const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
                      visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
                      title.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement});
                    }
                  </script>
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="position:relative;">
                  <input type="radio" value="catalog" name="dataoption">
                  <div data-id="butedit" class="btmiddleright"></div>
                  <span></span>
                  <script>
                    const title=thisNode.getNextChild("chkcatg").getRelationship("siteelementsdata").getChild();
                    title.writeProp(thisElement);
                    //adding the edition pencil
                    if (webuser.isWebAdmin()) {
                      const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
                      visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
                      title.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement});
                    }
                  </script>
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="position:relative;">
                  <input type="radio" value="checkout" name="dataoption">
                  <div data-id="butedit" class="btmiddleright"></div>
                  <span></span>
                  <script>
                    const title=thisNode.getNextChild("chkcheckout").getRelationship("siteelementsdata").getChild();
                    title.writeProp(thisElement);
                    //adding the edition pencil
                    if (webuser.isWebAdmin()) {
                      const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
                      visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
                      title.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement});
                    }
                  </script>
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="position:relative;">
                  <input type="radio" value="lang" name="dataoption">
                  <script>
                    const {AlertMessage}=await import('./' + CLIENT_MODULES_PATH + 'alert.mjs');
                    const {Linker, Node}=await import('./' + CLIENT_MODULES_PATH + 'nodes.mjs');
                    const {arrayUnpacking}=await import('./' + SHARED_MODULES_PATH + 'utils.mjs');
                    thisElement.form.dataoption.forEach(radio=>{
                      radio.addEventListener("change", (ev)=>{
                      if (thisElement.checked) {
                        if (!thisElement.form.impdata.value) {
                          new AlertMessage(thisElement.form.elements.nocontent.value, 2000).showAlert();
                          thisElement.checked=false;
                          return false;
                        }
                        let data=JSON.parse(thisElement.form.impdata.value);
                        let datalang=new Linker();
                        arrayUnpacking(data.languages).forEach(lang=>datalang.addChild(new Node().load(lang)));
                        datalang.setChildrenView(thisElement.parentElement.querySelector("template").nextElementSibling, thisElement.parentElement.querySelector("template"));
                        thisElement.parentElement.querySelector("template").nextElementSibling.style.display="block";
                      }
                      else thisElement.parentElement.querySelector("template").nextElementSibling.style.display="none";
                      });
                    });
                  </script>
                  <div data-id="butedit" class="btmiddleright"></div>
                  <span></span>
                  <script>
                    const title=thisNode.getNextChild("chklang").getRelationship("siteelementsdata").getChild();
                    title.writeProp(thisElement);
                    
                    //adding the edition pencil
                    if (webuser.isWebAdmin()) {
                      const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
                      visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
                      title.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement});
                    }
                  </script>
                  <template>
                    <div style="margin:auto; text-align:left; margin-bottom:0.2em">
                      <input type="checkbox" value="" name="">
                      <script>
                        thisNode.writeProp(thisElement, "id", "value");
                        thisNode.writeProp(thisElement, "code", "name");
                      </script>
                      <span></span>
                      <script>
                        thisNode.writeProp(thisElement, "code");
                      </script>
                    </div>
                  </template>
                  <div class="msgbox" style="display:none"></div>
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="position:relative;">
                  <input type="radio" value="users" name="dataoption">
                  <div data-id="butedit" class="btmiddleright"></div>
                  <span></span>
                  <script>
                    const title=thisNode.getNextChild("chkusers").getRelationship("siteelementsdata").getChild();
                    title.writeProp(thisElement);
                    //adding the edition pencil
                    if (webuser.isWebAdmin()) {
                      const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
                      visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
                      title.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement});
                    }
                  </script>
                </span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="position:relative;">
        <div data-id="butedit" class="btmiddleright"></div>
        <input type="hidden" name="impalertmsg" disabled>
        <script>
          const myNode=thisNode.getNextChild("imploadingmsg").getRelationship("siteelementsdata").getChild();
          myNode.writeProp(thisElement);
          if (webuser.isWebAdmin()) {
            myNode.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement, thisAttribute: "value"});
            const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
            visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
            thisElement.type="text";
          }
        </script>
      </div>
      <div style="position:relative;">
        <div data-id="butedit" class="btmiddleright"></div>
        <input type="hidden" name="nocontent" disabled>
        <script>login=0
          const myNode=thisNode.getNextChild("impnocontent").getRelationship("siteelementsdata").getChild();
          myNode.writeProp(thisElement);
          if (webuser.isWebAdmin()) {
            myNode.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement, thisAttribute: "value"});
            thisElement.type="text";
            const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
            visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
          }
        </script>
      </div>
      <div style="position:relative;">
        <div data-id="butedit" class="btmiddleright"></div>
        <input type="hidden" name="implangerror" disabled>
        <script>
          const myNode=thisNode.getNextChild("implangerror").getRelationship("siteelementsdata").getChild();
          myNode.writeProp(thisElement, null, "value");
          if (webuser.isWebAdmin()) {
            myNode.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement, thisAttribute: "value"});
            thisElement.type="text";
            const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
            visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
          }
        </script>
      </div>
      <span style="position:relative;">
        <div data-id="butedit" class="btmiddleright"></div>
        <button type="button" data-id="but" class="btn"></button>
        <script>
        thisNode.getNextChild("butimp").getRelationship("siteelementsdata").getChild().writeProp(thisElement);
        
        if (!webuser.isSystemAdmin) thisElement.disabled=true; //Only sysadmin for when we enter with webadmin to edit label texts
        
        const {AlertMessage}=await import('./' + CLIENT_MODULES_PATH + 'alert.mjs');
        const {Node, Linker}=await import('./' + CLIENT_MODULES_PATH + 'nodes.mjs');
        const {importFunc}=await import('./' + CLIENT_MODULES_PATH + 'import.mjs');
        const {arrayUnpacking}=await import('./' + SHARED_MODULES_PATH + 'utils.mjs');
        
        thisElement.addEventListener("click", async function(event){
          event.preventDefault();
          const myFunc=importFunc.get(thisElement.form.dataoption.value);
          if (!thisElement.form.impdata.value) {
            new AlertMessage(thisElement.form.elements.nocontent.value, 2000).showAlert();
            return false;
          }
          if (!myFunc){
            //we show the alert message No selection
            new AlertMessage(thisElement.form.previousElementSibling.elements.noselection.value, 2000).showAlert();
            return false;
          }
          const myimpalert=new AlertMessage(thisElement.form.elements.impalertmsg.value);
          const data=JSON.parse(thisElement.form.impdata.value)

          if (thisElement.form.dataoption.value=="lang") {
            // Source is two elements: array of languages and array of siteelments trees for each language
            // It imports new langs and add it
            
            // <-- Get user selected (check box) langs: exportedDataLangs, exportedDataTrees => importedDataLangs, importedDataTrees
            const exportedDataLangs = arrayUnpacking(data.languages).map(lang=>new Node().load(lang));
            if (exportedDataLangs.length==0) {
              // we show the alert message No selection
              new AlertMessage(thisElement.form.elements.nocontent.value, 2000).showAlert();
              return;
            }
            const selectedLangs = Array.from(thisElement.form.querySelectorAll('input[type="checkbox"]')).filter(lang=>lang.checked).map(lang=>lang.value);
            if (selectedLangs.length==0) {
              // we show the alert message No selection
              new AlertMessage(thisElement.form.previousElementSibling.elements.nocontent.value, 2000).showAlert();
              return;
            }
            myimpalert.showAlert(); //importing in process
            //Now we filter the languages selected from the exportedDataLangs
            const exportedDataTrees = arrayUnpacking(data.trees).map(dataTree=>new Node().load(dataTree));
            
            const selectedIndexes = exportedDataLangs.map((exportedDataLang, i)=>selectedLangs.includes(exportedDataLang.props.id) ? i : -1);
            const importedDataLangs = exportedDataLangs.filter((exportedDataLang, i)=>selectedIndexes[i]!=-1);
            const importedDataTrees = exportedDataTrees.filter((exportedDataTree, i)=>selectedIndexes[i]!=-1);
            importedDataTrees.forEach(importedDataTree=>new Linker().addChild(importedDataTree));

            // <-- Get user selected (check box) langs: exportedDataLangs, exportedDataTrees => importedDataLangs, importedDataTrees
            await myFunc(importedDataTrees, importedDataLangs);
            myimpalert.hideAlert();
            return;
            // falta refresh data ******
          }
          myimpalert.showAlert();
          const result = await myFunc(data);
          myimpalert.hideAlert();
          if (result===false) new AlertMessage(thisElement.form.elements.implangerror.value, 2000).showAlert();
        });
        </script>
        <input type="hidden" disabled>
        <script>
          const myNode=thisNode.getNextChild("butimp").getRelationship("siteelementsdata").getChild();
          myNode.writeProp(thisElement);
          thisElement.onblur=function(){
            thisElement.type="hidden";
            thisElement.parentElement.querySelector('button[data-id=but]').innerHTML=thisElement.value;
          }
          //adding the edition pencil
          if (webuser.isWebAdmin()) {
            const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
            visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
            myNode.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement});
          }
        </script>
      </span>
    </form>
  </div>
</div>