function openTab(pageName, elmnt) {
  // Hide all elements with class="tabcontent" by default */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  tablinks = document.getElementsByClassName("tablink");

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    tablinks[i].classList.remove("active");
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";
  elmnt.classList.add("active");
}

function linkDatasetToField(detail, targetFormName, inputName) {
  let targetForm = document.getElementById(targetFormName);
  targetForm.addEventListener("populate", event => {
    let resourceField = targetForm.querySelector(`input[name="${inputName}"]`);
    if (resourceField) {
      resourceField.value = JSON.stringify({ "@id": detail.dataset.src });
      resourceField.setAttribute(
        "value",
        JSON.stringify({ "@id": detail.dataset.src })
      );
    }
  });
}

function refreshList(formId, listId) {
  let form = document.getElementById(formId);
  form.addEventListener("save", event => {
    let list = document.getElementById(listId);
    list.dataset.src = list.dataset.src;
  });
}

//Remove pagination when there is no resource in a step group
function actualizePagination() {
  var resources_containers = document.querySelectorAll(
    ".resource_by_step sib-form+div"
  );
  for (let resources_container of resources_containers) {
    if (resources_container.innerHTML === "") {
      resources_container.nextSibling.innerHTML = "";
    }
  }
}

//Manage select hidden to fullfill them with more "more criterias" selection
function selectHiddenManagement() {
  //Need to refactor the part
}

jQuery(document).ready(function($) {
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();

  let userAccountDataSrc = document.getElementById("user-account-picture");
  linkDatasetToField(userAccountDataSrc, "validation-form", "reviewer");
  linkDatasetToField(userAccountDataSrc, "improvement-dialog-form", "reviewer");
  linkDatasetToField(userAccountDataSrc, "refusal-dialog-form", "reviewer");

  refreshList("resource-creation-form", "resources-history");
  refreshList("validation-form", "pending-resources");
  refreshList("refusal-dialog-form", "pending-resources");
  refreshList("improvement-dialog-form", "pending-resources");
  refreshList("entrepreneur_profile_creation", "entrepreneur_info");
  refreshList("entrepreneur_profile_creation", "entrepreneur_contact");
  refreshList("mentor_profile_creation", "mentor_info");
  refreshList("mentor_profile_creation", "mentor_complementary");
  refreshList("mentor_profile_creation", "mentor_contact");

  const logoutButtons = document.getElementsByClassName("logout-button");
  for (var i = 0; i < logoutButtons.length; i++) {
    logoutButtons[i].addEventListener("click", function() {
      window.dispatchEvent(
        new CustomEvent("requestNavigation", {
          detail: { route: "splash-index" }
        })
      );
      document.querySelector("sib-auth").logout();
      setTimeout(function() {
        location.reload();
      }, 1000);
    });
  }

  //ENTREPRENEUR DASHBOARD*************************************************************
  //In the entrepreneur dashboard, we set data from the display form to the hidden ones.
  var forms = document.querySelectorAll(".resource_by_step");

  forms.forEach(form => {
    form.addEventListener("populate", e => {
      //On load in dashbord Entrepreneur
      actualizePagination();
      //SEARCH BY KEYWORD
      //To retrieve keyword
      //https://git.happy-dev.fr/startinblox/framework/sib-core/issues/379
      //TODO: Wait for a solution to filter with multiple value with "OR" instead of "AND".
      let keyword_form = document.getElementById("search-by-keyword");
      let keyword_field = keyword_form.querySelector(`input[name="keyword"]`);

      let keyword_submit = document.getElementById(`keyword_submit`);
      let keyword_hidden_fields = document.querySelectorAll(
        'hidden-widget[name="search_for_a_resource"] input'
      );

      keyword_submit.addEventListener("click", function() {
        keyword_hidden_fields.forEach(hidden_field => {
          hidden_field.setAttribute("value", keyword_field.value);
          actualizePagination();
          form.querySelector("sib-form").component.inputChange();
        });
      });

      //SEARCH IN DATABASE INSTANCE ONLY
      let instance_only = document.getElementById("instance_database_only");
      let checkbox_instance_only = instance_only.querySelector("input");

      checkbox_instance_only.onclick = function() {
        if (this.checked) {
          //We have to retrieve all data-scr needed to make them pointed only on the instance.
          //How to?
        }
      };

      //MORE CRITERIAS
      //TODO: Refactor this section ?
      const more_criterias_form = document.getElementById("more_criterias");

      // https://git.happy-dev.fr/startinblox/framework/sib-core/issues/453
      window.setTimeout(() => {
        //To retrieve format
        //TODO: How we should filled the hidden field with multiple value?
        //TODO: The hidden search field set with one value doesn't work
        let format_field_search = more_criterias_form.querySelector(
          `select[name="format"]`
        );
        format_hidden_field = document.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] select[name="format"]'
        );


        //TODO: The first time the event is not call.
        format_field_search.onchange = function() {
          let option_selected = format_field_search.querySelector(
            "option:checked"
          );

          format_hidden_field.forEach(function(select_hidden) {
            options_hidden = select_hidden.getElementsByTagName("option");
            for (let option_hidden of options_hidden) {
              //Removing the selected attribute from previous selection
              option_hidden.removeAttribute("selected");
              if (option_hidden.value == option_selected.value) {
                //Actually selecting the option if it is the good one
                option_hidden.setAttribute("selected", "selected");
                select_hidden.setAttribute('value', option_selected.value)
              }

              //Trigerring a reload of the associated form
              let parent_form = select_hidden.closest('sib-form');
              parent_form.component.inputChange();
            }
            actualizePagination();
            form.querySelector("sib-form").component.inputChange();
          });
        };

        //To retrieve language
        let language_field_search = more_criterias_form.querySelector(
          `select[name="language"]`
        );
        language_hidden_field = document.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] select[name="language"]'
        );

        language_field_search.onchange = function() {
          let option_selected = language_field_search.querySelector(
            "option:checked"
          );
          
          language_hidden_field.forEach(function(select_hidden) {
            options_hidden = select_hidden.getElementsByTagName("option");
            for (let option_hidden of options_hidden) {
              //Removing the selected attribute from previous selection
              option_hidden.removeAttribute("selected");

              if (option_hidden.value == option_selected.value) {
                //Actually selecting the option if it is the good one
                option_hidden.setAttribute("selected", "selected");
                select_hidden.setAttribute('value', option_selected.value)
              }

              //Trigerring a reload of the associated form
              let parent_form = select_hidden.closest('sib-form');
              parent_form.component.inputChange();
            }
            actualizePagination();
            form.querySelector("sib-form").component.inputChange();
          });
        };

        //To retrieve year of publication
        //WARNING: If the user want to select "20" to get 21century made, he will get no result.
        //I think it is a UX problem.
        let year_field_search = more_criterias_form.querySelector(
          `input[name="publication_year"]`
        );
        let year_hidden_fields = document.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] input[name="publication_year"]'
        );

        year_field_search.addEventListener("input", function() {
          year_hidden_fields.forEach(year_field => {
            year_field.setAttribute("value", year_field_search.value);
            actualizePagination();
            form.querySelector("sib-form").component.inputChange();
          });
        });

        //To retrieve the country
        let country_field_search = more_criterias_form.querySelector(
          `input[name="country"]`
        );
        let country_hidden_fields = document.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] input[name="country"]'
        );

        country_field_search.addEventListener("input", function() {
          country_hidden_fields.forEach(country_field => {
            country_field.setAttribute("value", country_field_search.value);
            actualizePagination();
            form.querySelector("sib-form").component.inputChange();
          });
        });
      }, 4000);
    });
  });
});