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");
}

//Manage the visual of the fake tabs in entrepreneur dashboard.
function openFakeTab(elmnt) {
  // Hide all elements with class="tabcontent" by default */
  var i, tablinks;
  tablinks = document.getElementsByClassName("tablink");

  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  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 })
      );
    }
  });
}

//Refresh information after a form submission
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 refreshPagination() {
  var resources_containers = document.querySelectorAll(
    ".resource_by_step sib-form+div"
  );
  for (let resources_container of resources_containers) {
    if (
      resources_container.childElementCount < 5 ||
      resources_container.nextSibling.querySelector("nav span span+span")
        .textContent == 1
    ) {
      resources_container.nextSibling.setAttribute("style", "display:none");
    } else {
      resources_container.nextSibling.setAttribute("style", "display:block");
    }
  }
}

//Manage select hidden to fullfill them with more "more criterias" selection
function selectHiddenManagement(select_hidden, option_selected, form) {
  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();
  }
  form.querySelector("sib-form").component.inputChange();
  refreshPagination();
}

//Manage input hidden field to fullfill them with more "more criterias" selection
function inputHiddenManagement(field, field_search, form) {
  field.setAttribute("value", field_search.value);
  form.querySelector("sib-form").component.inputChange();
  refreshPagination();
}

//Manage select hidden for type to fullfill them with more "more criterias" selection
function selectHiddenManagementForType(tab, form) {
  let type_hidden_field = document.querySelectorAll(
    'hidden-widget[name="more_criterias_hidden"] select[name="type"]'
  );
  if (tab.classList.contains("active")) {
    //Fullfill hidden field
    let type_field_search = tab
      .querySelector(`sib-display`)
      .getAttribute("data-src");

    type_hidden_field.forEach(function(select_hidden) {
      options_hidden = select_hidden.getElementsByTagName("option");
      for (let option_hidden of options_hidden) {
        option_hidden.removeAttribute("selected");
        if (option_hidden.value == '{"@id": "' + type_field_search + '"}') {
          //Actually selecting the option if it is the good one
          option_hidden.setAttribute("selected", "selected");
          select_hidden.setAttribute("value", option_hidden.value);
          form.querySelector("sib-form").component.inputChange();
          refreshPagination();
        }
      }
      //Trigerring a reload of the associated form
      let parent_form = select_hidden.closest("sib-form");
      parent_form.component.inputChange();
      refreshPagination();
    });
  }
}

jQuery(document).ready(function($) {
  //Refresh pagination
  refreshPagination();

  // 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");
  refreshList("entrepreneur_profile_edition", "entrepreneur_info");
  refreshList("entrepreneur_profile_edition", "entrepreneur_contact");
  refreshList("mentor_profile_edition", "mentor_info");
  refreshList("mentor_profile_edition", "mentor_complementary");
  refreshList("mentor_profile_edition", "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 => {
      //Manage fake tabs
      let tabs = document.getElementsByClassName("filter_by_type");
      for (let tab of tabs) {
        selectHiddenManagementForType(tab, form);
      }

      //On load in dashbord Entrepreneur
      refreshPagination();

      //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);
          form.querySelector("sib-form").component.inputChange();
          refreshPagination();
        });
      });

      //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
      const more_criterias_form = document.getElementById("more_criterias");

      // https://git.happy-dev.fr/startinblox/framework/sib-core/issues/453
      window.setTimeout(() => {
        //Refresh data list on delete resources
        const deleteButton = document.querySelectorAll("sib-delete");
        for (var i = 0; i < deleteButton.length; i++) {
          deleteButton[i].addEventListener("resourceDeleted", e => {
            const historyList = document.getElementById("resources-history");
            historyList.dataset.src = historyList.dataset.src;

            let confirm_suppress = document.getElementById("confirm_suppress");
            confirm_suppress.setAttribute("hidden", "hidden");

            //If we supress from the detail resource view, we close this view.
            let mentor_resource_detail = document.getElementById(
              "mentor-resource-detail"
            );
            mentor_resource_detail.setAttribute("hidden", "hidden");
            this.dispatchEvent(
              new CustomEvent("requestNavigation", {
                bubbles: true,
                detail: { route: "actions" }
              })
            );
          });
        }

        //Manage fake tabs for type
        let tabs = document.getElementsByClassName("filter_by_type");

        for (let tab of tabs) {
          tab.addEventListener(
            "click",
            selectHiddenManagementForType(tab, form)
          );
        }

        //To retrieve format
        let format_field_search = more_criterias_form.querySelector(
          `select[name="format"]`
        );
        let 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) {
            selectHiddenManagement(select_hidden, option_selected, form);
          });
        };

        //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) {
            selectHiddenManagement(select_hidden, option_selected, form);
          });
        };

        //To retrieve field
        let field_field_search = more_criterias_form.querySelector(
          `select[name="fields"]`
        );
        let field_hidden_field = document.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] select[name="fields"]'
        );

        field_field_search.onchange = function() {
          let option_selected = field_field_search.querySelector(
            "option:checked"
          );

          field_hidden_field.forEach(function(select_hidden) {
            selectHiddenManagement(select_hidden, option_selected, form);
          });
        };

        //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(field => {
            inputHiddenManagement(field, year_field_search, form);
          });
        });

        //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(field => {
            inputHiddenManagement(field, country_field_search, form);
          });
        });
      }, 4000);
    });
  });
});