class Form{
  constructor(){
  }
  static TextBox(mandatory, translation_key, value){
    let validateClass = "";
    if(mandatory){
      validateClass = " needs-validation"
    }
    return `
      <div class="form-control">
        <label class="label">
          <span class="label-text">${getTranslation(translation_key)}</span>
        </label>  
        <input id="input-${translation_key}" type="text" placeholder="" class="input input-sm input-bordered ${validateClass}" value="${value}" />
      </div>
    `;
  }
  static Hidden(translation_key, value){    
    return `
      <div class="form-control" style="display:none">
        <input id="input-${translation_key}" type="text" placeholder="" class="input input-sm input-bordered" value="${value}" />
      </div>
    `;
  }

  static NumberField(mandatory, translation_key, value, field_class = "", readonly = false, includeLabel = true){
    let validateClass = "";
    let disabled = "";

    if(mandatory){
      validateClass = " needs-validation"
    }
    if(field_class != ""){
      field_class = " " + field_class;
    }
    if(readonly){
      disabled = " disabled";
    }


    let disabledKeys = ["+", "." , "-", ","];
    let step = "1";

    let onkeydownkeyCodes = "";
    for(var i=0; i < disabledKeys.length;i++){
      onkeydownkeyCodes += (onkeydownkeyCodes == "" ? "" : " || " ) + "event.key==='"+disabledKeys[i]+"'";
    }


    if(includeLabel){
      return `
        <div class="form-control">
          <label class="label">
            <span class="label-text">${getTranslation(translation_key)}</span>
          </label>  
          <input id="input-${translation_key}" type="number" onpaste="return false;" onkeydown="if(${onkeydownkeyCodes}){event.preventDefault();}" placeholder="" class="input input-sm input-bordered ${validateClass} ${field_class}" value="${value}" ${disabled}/>
        </div>
      `;
    }
    else{
      return `
        <div class="form-control">
          <input id="input-${translation_key}" type="number" onpaste="return false;" onkeydown="if(${onkeydownkeyCodes}){event.preventDefault();}" placeholder="" class="input input-sm input-bordered ${validateClass} ${field_class}" value="${value}" ${disabled}/>
        </div>
    `;
    }
  }


  static Float(mandatory, translation_key, value){
    let validateClass = "";

    if(mandatory){
      validateClass = " needs-validation"
    }

    let disabledKeys = ["+", "-", ","];
    let step = "1";

    let onkeydownkeyCodes = "";
    for(var i=0; i < disabledKeys.length;i++){
      onkeydownkeyCodes += (onkeydownkeyCodes == "" ? "" : " || " ) + "event.key==='"+disabledKeys[i]+"'";
    }

    return `
      <div class="form-control">
        <label class="label">
          <span class="label-text">${getTranslation(translation_key)}</span>
        </label>  
        <input  id="input-${translation_key}" type="number" onpaste="return false;" onkeydown="if(${onkeydownkeyCodes}){event.preventDefault();}" placeholder="" class="input input-sm input-bordered ${validateClass}" value="${value}" />
      </div>
    `;
  }

  static TextAreaGrow(){
    Array.from(document.querySelectorAll(".ta-autogrow")).forEach(function(ta){
      ta.style.height='auto'; 
      ta.style.height = (ta.scrollHeight + 2) + 'px';
    });
  }

  static TextArea(mandatory, translation_key, value, autogrow = false, rows = 3){
    let validateClass = "";
    let onInput = "";
    let autoGrowClass = "";

    if(mandatory){
      validateClass = " needs-validation"
    }


    if(autogrow){
      onInput = `onInput="this.style.height='auto'; this.style.height = (this.scrollHeight + 2) + 'px';"`;
      autoGrowClass = " ta-autogrow";
    }

    return `
      <div class="form-control">
        <label class="label">
          <span class="label-text">${getTranslation(translation_key)}</span>
        </label>  
        <textarea rows="${rows}" id="input-${translation_key}" type="text" placeholder="" ${onInput} class="textarea textarea-sm textarea-bordered ${validateClass}${autoGrowClass}" >${value}</textarea>
      </div>
    `;
  }

  static DateField(mandatory, translation_key, value){
    let validateClass = "";

    if(mandatory){
      validateClass = " needs-validation"
    }

    return `
      <div class="form-control">
        <label class="label">
          <span class="label-text">${getTranslation(translation_key)}</span>
        </label>  
        <input id="input-${translation_key}" type="date" placeholder=""class="input input-sm input-bordered ${validateClass}" value="${value}" />
      </div>
    `;
  }

  static Combobox(mandatory, translation_key, value, options, field_class){
    let validateClass = "";

    if(mandatory){
      validateClass = " needs-validation";
    }

    if(field_class != ""){
      field_class = " " + field_class;
    }


    let optionsHtml = ``;
    for(let i=0; i<options.length; i++){
      let selected = "";
      if(options[i].id == value){
        selected = " selected";
      }

      optionsHtml += `<option value="${options[i].id}" ${selected}>${options[i].name}</option>`;
    }

    return `
      <div class="form-control">
        <label class="label">
          <span class="label-text">${getTranslation(translation_key)}</span>
        </label>  
        <select id="input-${translation_key}" class="select select-sm select-bordered ${validateClass} ${field_class}" value="${value}">
          ${optionsHtml}
        </select>
      </div>
    `;
  }

  static refillFilesDropDown(element, data){
    data = data.data

    let filesOptions = [
      {"id":-1, "name":getTranslation("unknown")}
      ,{"id":-2, "name":getTranslation("new_file"), "show_extra_field":true}
    ];

    if(sync.isActive("files")){
      filesOptions = [
        {"id":-1, "name":getTranslation("unknown")}
      ];
    }

    data = [...filesOptions, ...data];

    
    let parentDiv = element.parentElement;
    
    let buttonLabel = "...";
    let mandatory = element.getAttribute("data-mandatory") == "true";
    let translation_key = element.getAttribute("data-translationkey");

    let li = parentDiv.getElementsByTagName("li");

    while (li[0]){
      parentDiv.removeChild(li[0])
    }


    for(let i=0; i<data.length; i++){
      let selected = "";
      if(data[i].id == -1){
        buttonLabel = data[i].name;
        selected = " active"
      }

      let el = document.createElement("li");
      el.setAttribute("data-validate", mandatory);
      el.setAttribute("parentId", `input-${translation_key}`);
      el.setAttribute("value", data[i].id);
      el.setAttribute("show-childtext", data[i].show_extra_field ?? "false");
      el.innerHTML = `<a class="${selected}">${data[i].name}</a>`;

      el.onclick = function(){
        if(!this.classList.contains("active")){
          Array.from(this.parentElement.querySelectorAll(".active")).forEach(function(itm){
            itm.classList.remove("active");
          });

          Array.from(this.getElementsByTagName("a")).forEach(function(itm){
            itm.classList.add("active");
          });

          document.getElementById(this.getAttribute("parentId") + "-new-name").value = "";
          document.getElementById(this.getAttribute("parentId") + "-button").innerText = this.innerText;
          document.getElementById(this.getAttribute("parentId") + "-dropdown").blur();
          document.getElementById(this.getAttribute("parentId")).value = this.getAttribute("value");

          if(this.getAttribute("show-childtext") == "true"){
            document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "";
            if(this.getAttribute("data-validate") == "true"){
              document.getElementById(this.getAttribute("parentId") + "-new-name").classList.add("needs-validation");
            }
          }
          else{
            document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "none";
            document.getElementById(this.getAttribute("parentId") + "-new-name").classList.remove("needs-validation");
          }
        }
        Form.validate();
      }


      parentDiv.appendChild(el)
    
    }


  }

  static initSearchComboboxes(){

    Array.from(document.getElementById("currentpage-content").querySelectorAll(".filterablecombobox-search")).forEach(function(item){
      item.onkeyup = function(){
        globalFileSearcher.startTimer(500, this)
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll(".filterablecombobox")).forEach(function(item){
      //get children
      let childs = item.getElementsByTagName("li");
      for(let i=0; i<childs.length; i++){
        childs[i].onclick = function(){
          if(!this.classList.contains("active")){
            Array.from(this.parentElement.querySelectorAll(".active")).forEach(function(itm){
              itm.classList.remove("active");
            });
  
            Array.from(this.getElementsByTagName("a")).forEach(function(itm){
              itm.classList.add("active");
            });

            document.getElementById(this.getAttribute("parentId") + "-new-name").value = "";
            document.getElementById(this.getAttribute("parentId") + "-button").innerText = this.innerText;
            document.getElementById(this.getAttribute("parentId") + "-dropdown").blur();
            document.getElementById(this.getAttribute("parentId")).value = this.getAttribute("value");

            if(this.getAttribute("show-childtext") == "true"){
              document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "";
              if(this.getAttribute("data-validate") == "true"){
                document.getElementById(this.getAttribute("parentId") + "-new-name").classList.add("needs-validation");
              }
            }
            else{
              document.getElementById(this.getAttribute("parentId") + "-new-name").style.display = "none";
              document.getElementById(this.getAttribute("parentId") + "-new-name").classList.remove("needs-validation");
            }
          }
          Form.validate();
        }
      }
      
    });
  }


  static SearchCombobox(mandatory, translation_key, value, options, database_id){
    let validateClass = "";

    if(mandatory){
      validateClass = " needs-validation";
    }
    let optionsHtml = ``;
    let buttonLabel = "..."

    let activeFound = false;

    for(let i=0; i<options.length; i++){
      let selected = "";

      if(options[i].id == value){
        buttonLabel = options[i].name;
        selected = " active"
        activeFound = true;


      }
      optionsHtml += `<li data-validate="${mandatory}" parentId="input-${translation_key}" value="${options[i].id}" show-childtext="${options[i].show_extra_field ?? "false"}"><a class="${selected}">${options[i].name}</a></li>`;
    }


    return `
      <div class="form-control">
        <label class="label">
            <span class="label-text">${getTranslation(translation_key)}</span>
        </label>    
        <div class="dropdown" >
          <button tabindex="0" class="select select-sm select-bordered w-full filterabledropdownbutton" id="input-${translation_key}-button">${buttonLabel}</button>
          
          
          <ul tabindex="0" id="input-${translation_key}-dropdown" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 filterablecombobox">
            <input type="text" class="input input-sm input-bordered filterablecombobox-search" data-parentid = "${database_id}" data-mandatory="${mandatory}" data-translationkey="${translation_key}" placeholder="Search..">
            ${optionsHtml}
          </ul>
        </div>
        <input type="text" style="display:none" class="input input-sm input-bordered" id="input-${translation_key}-new-name">
        <input type="text" style="display:none" class="input input-sm input-bordered input-searchableDropDown ${validateClass}" id="input-${translation_key}" value="${value}" >
      </div>
    `;
  }

  static Divier(text = ""){
    return `
      <div class="divider">${text}</div>
    `;
  }


  static validate(){
    if(document.getElementById("input-save-button")){
      let valid = true;
      Array.from(document.getElementById("currentpage-content").querySelectorAll(".needs-validation")).forEach(function(el){
        if(el.value.trim() === ""){
          valid = false;
          if(!el.classList.contains("text-pink-600")){
            el.classList.add("text-pink-600");
            el.classList.add("border-pink-500");
          }
        }
        else{
          if(el.classList.contains("text-pink-600")){
            el.classList.remove("text-pink-600");
            el.classList.remove("border-pink-500");
          }
        }
      });
      document.getElementById("input-save-button").disabled = !valid;
    }
  }

  static initValidation(){
    Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
      if(!el.classList.contains("filterablecombobox-search")){
        el.onkeyup = function(){
          if(el.classList.contains("lawbook_laws_calc_penalty")){
            FileEntry.ValidateAndCalcLawBookLaws();
          }
          else{
            Form.validate();
          }
          
        }
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
      el.onchange = function(){
        Form.validate();
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("textarea")).forEach(function(el){
      el.onkeyup = function(){
        Form.validate();
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("select")).forEach(function(el){
      el.onchange = function(){

        if(el.classList.contains("police_fileentry_type_of_entry")){
          FileEntry.ToggleLawBooks();
        }
        else{
          Form.validate();
        }
      }
    });
  }

  static getFormData(){
    let retval = {};
    Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
      if(!el.classList.contains("filterablecombobox-search")){
        let key = el.id.replace("input-","");

        if(el.type != "checkbox"){
          retval[key] = el.value;
        }
        else{
          retval[key] = el.checked ? 1 : 0;
        }

        
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("textarea")).forEach(function(el){
      let key = el.id.replace("input-","");
      retval[key] = el.value;
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("onchange")).forEach(function(el){
      let key = el.id.replace("input-","");
      retval[key] = el.value;
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("select")).forEach(function(el){
      let key = el.id.replace("input-","");
      retval[key] = el.value;
    });

    return retval;
  }

  static disableAll(){
    Array.from(document.getElementById("currentpage-content").querySelectorAll("input")).forEach(function(el){
      if(!el.classList.contains("ignore-readonly")){
        el.readOnly  = true;
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("textarea")).forEach(function(el){
      if(!el.classList.contains("ignore-readonly")){
        el.readOnly  = true;
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll("select")).forEach(function(el){
      if(!el.classList.contains("ignore-readonly")){
        el.disabled  = true;
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll(".filterabledropdownbutton")).forEach(function(el){
      if(!el.classList.contains("ignore-readonly")){
        el.disabled  = true;
        el.readOnly  = true;
      }
    });
  }
  


  static cancelButton(source, destination, destination_id){
    return `<button id="input-cancel-button" data-destination="${destination}" data-destination-id="${destination_id}" class="btn btn-error btn-sm">${getTranslation("cancel")}</button>`; 
  }
  static saveButton(source, destination, uid, destination_id){
    return `<button id="input-save-button" class="btn btn-primary btn-sm" data-destination="${destination}" data-destination-id="${destination_id}" data-uid="${uid}" data-source="${source}" disabled>${getTranslation("save")}</button>`; 
  }

  static initSaveButtons(){
    document.getElementById("input-cancel-button").onclick = function(){
      loadData(
        this.getAttribute("data-destination"),
        this.getAttribute("data-destination-id"),
        true
      )
    }
    document.getElementById("input-save-button").onclick = function(){
      saveData(
        this.getAttribute("data-source"),
        this.getAttribute("data-destination"),
        this.getAttribute("data-uid"),
        this.getAttribute("data-destination-id")
      )
    }
  }

  static initViewModeTopButtons(){
    if(document.getElementById("input-back-button")){
      document.getElementById("input-back-button").onclick=function(){
        loadPage(this.getAttribute("data-destination"), this.getAttribute("data-destinationId"), "true");
      }
    }
    if(document.getElementById("input-edit-button")){
      document.getElementById("input-edit-button").onclick=function(){
        loadPage(this.getAttribute("data-destination"), this.getAttribute("data-destinationId"));
      }
    }
    
  }

  static BackEditBtn(backDestination, editDest, editId, allowEditButton, backDestinationId = -1 ){
    let editBtn = ``;
    if(allowEditButton){
      editBtn = `<button id="input-edit-button" data-destination="${editDest}" data-destinationId="${editId}" class="btn btn-sm btn-warning">${getTranslation("edit")}</button>`;
    }
    return `
      <div class="text-xl font-semibold inline-block mb-6">
        <button id="input-back-button" data-destination="${backDestination}" data-destinationId="${backDestinationId}" class="btn btn-sm btn-error"><i class="fa-solid fa-arrow-left"></i></button>
        ${editBtn}
      </div>
    `;

  }

  static getViewButtonIcon(recordid, destination){
    return `
      <button class="btn btn-sm btn-accent table-viewbutton" data-id="${recordid}" data-destination="${destination}">
        <i class="fa-solid fa-circle-info"></i>
      </button>
    `;
  }

  static getIsWantedButton(recordid, destination, isWanted){

    let disabled = isWanted ? " disabled" : ""

    return `
      <button class="btn btn-sm btn-secondary table-iswantedbutton" data-id="${recordid}" data-destination="${destination}" ${disabled}>
        <i class="fa-solid fa-handcuffs"></i>
      </button>
    `;
  }

  static getEditButtonIcon(recordid, destination, allowButton=true){
    if(!allowButton){
      return "";
    }

    return `
      <button class="btn btn-sm btn-warning table-editbutton" data-id="${recordid}" data-destination="${destination}">
        <i class="fa-solid fa-pen-to-square"></i>
      </button>
    `;
  }

  static getDeleteButtonIcon(recordid, delete_destination , allowButton=true){
    if(!allowButton){
      return ``;
    }
    return `
      <button class="btn btn-sm btn-error table-deletebutton" data-deleteDestination="${delete_destination}" data-id="${recordid}">
        <i class="fa-solid fa-trash-can"></i>
      </button>
    `;
  }


  static overviewHeadline(destination, inclSearch = true, allowAddNew = true){
    let search = "";
    if(inclSearch){

      let addBtn = "";
      if(allowAddNew){
        addBtn = `<button class="btn px-6 btn-sm normal-case btn-primary table-addbutton mr-1" data-destination="${destination}"><i class="fa-solid fa-circle-plus"></i></button>`;
      }

      return `
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">  
            <div class="input-group">
              ${addBtn}
              <input id="global-searchbar" type="text" placeholder="${getTranslation("search")}" class="input input-sm input-bordered w-72 mr-1" value="${document.body.getAttribute("data-quicksearch") ?? ""}" />
              <button id="global-searchbar-start" class="btn btn-sm btn-square">
                <i class="fa-solid fa-magnifying-glass"></i>
              </button>
            </div>
        </div>
      `;
    }
    else{
      if(allowAddNew){
        return `
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="text-left">
              <button class="btn px-6 btn-sm normal-case btn-primary table-addbutton" data-destination="${destination}"><i class="fa-solid fa-circle-plus"></i></button>
            </div>
          </div>
        `;
      }
      else{
        return ``;
      }
      
    }

   
  }


  static getPageChanger(curPage, maxPage){
    curPage = curPage + 1;
    let nextDisabled = "";
    let prevDisabled = "";
    if(curPage == 1){
      prevDisabled = " disabled";
    }
    if(curPage >= maxPage){
      nextDisabled = " disabled";
    }
    

    document.body.setAttribute("data-cur-pageNum", curPage);

    return `
      <div class="btn-group">
        <button id="global-previous-page" class="btn btn-primary btn-sm" ${prevDisabled}>«</button>
        <button class="btn btn-ghost btn-sm" data-currentpage="${curPage}" id="global-page-current">${curPage}</button>
        <button id="global-next-page" class="btn btn-primary  btn-sm" ${nextDisabled}>»</button>
      </div>
    `;
  }

  static initPageChange(){
    if(document.getElementById("global-previous-page")){
      document.getElementById("global-previous-page").onclick=function(){
        let curpage = document.body.getAttribute("data-cur-pageNum");
        curpage = 1*curpage;
        let destPage = curpage-1;
        document.body.setAttribute("data-cur-pageNum", destPage);
        reload();
      }
    }
    
    if(document.getElementById("global-next-page")){
      document.getElementById("global-next-page").onclick=function(){
        let curpage = document.body.getAttribute("data-cur-pageNum");
        curpage = 1*curpage;
        let destPage = curpage+1;
  
        document.body.setAttribute("data-cur-pageNum", destPage);
  
        reload();
      }
    }
  }

  static openDeleteModal(id, source){

    document.getElementById("delete-modal-title").innerHTML = getTranslation("delete");
    document.getElementById("delete-modal-message").innerHTML = getTranslation("delete_message");
    document.getElementById("delete-modal-cancel").innerHTML = getTranslation("cancel");
    document.getElementById("delete-modal-delete").innerHTML = getTranslation("delete");

    document.getElementById("delete-modal").setAttribute("data-id", id);
    document.getElementById("delete-modal").setAttribute("data-delete-destination", source);
    document.getElementById("delete-modal").checked = true;
  }


  static initTableButtons(){
    Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-deletebutton")).forEach(function(el){
      el.onclick = function(){
        Form.openDeleteModal(this.getAttribute("data-id"), this.getAttribute("data-deleteDestination"));
      }
    });

    if(document.getElementById("global-searchbar")){
      document.getElementById("global-searchbar").focus();
      document.getElementById("global-searchbar").setSelectionRange(document.getElementById("global-searchbar").value.length, document.getElementById("global-searchbar").value.length);

      document.getElementById("global-searchbar").onkeyup = function(e){
        if(e.key.toLowerCase() == "enter"){
          resetPageNum();
          reload();
        }
      }
    }

    if(document.getElementById("global-searchbar-start")){
      document.getElementById("global-searchbar-start").onclick=function(){
        resetPageNum();
        reload();
      }
    }
    
    Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-addbutton")).forEach(function(el){
      el.onclick = function(){
        loadPage(this.getAttribute("data-destination"), -1);
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-editbutton")).forEach(function(el){
      el.onclick = function(){
        loadPage(this.getAttribute("data-destination"), this.getAttribute("data-id"));
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-viewbutton")).forEach(function(el){
      el.onclick = function(){
        loadPage(this.getAttribute("data-destination"), this.getAttribute("data-id"));
      }
    });
    Array.from(document.getElementById("currentpage-content").querySelectorAll(".table-iswantedbutton")).forEach(function(el){
      el.onclick = function(){


        let fromObj = this.getAttribute("data-destination").toLowerCase();
        let fromId = this.getAttribute("data-id");

        if(fromObj == "regvehicle" || fromObj == "regvehicleimpounded"){
          changeDataInColumn(fromObj, "is_wanted", fromId, 1, true);
        }
        else if(fromObj == "regweapons"){
          changeDataInColumn(fromObj, "is_wanted", fromId, 1, true);
        }
        else if(fromObj == "files"){
          loadPage('fileentry.add',fromId,'true')
        }

      }
    });
  }

}