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 loadFile(event) {
  var elt = document.createElement("img");
  elt.src = URL.createObjectURL(event.target.files[0]);

  var labeltag = event.target.closest("label");
  labeltag.querySelector("input[name='preview_image']").style.display = "none";

  if (labeltag.querySelector("img")) {
    var oldImage = labeltag.querySelector("img");
    labeltag.removeChild(oldImage);
  }

  labeltag.insertAdjacentElement("afterbegin", elt);
}

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.nextSibling &&
      (resources_container.childElementCount < 5 ||
        resources_container.nextSibling.querySelector("nav span span+span")
          .textContent == 1)
    ) {
      resources_container.nextSibling.setAttribute("style", "display:none");
    } else if (resources_container.nextSibling) {
      resources_container.nextSibling.setAttribute("style", "display:block");
    }
  }
}

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

//Manage input hidden field to fullfill them with more "more criterias" selection
function inputHiddenManagement(field, field_search) {
  field.setAttribute("value", field_search.value);
  let parent_form = field.closest("sib-form");
  parent_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 = form.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);
        }
      }

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

//Manage the report broken links hidden form
function fillReportBrokenLinkForm(event, userWhoSubmitReport, formBrokenLink) {

  formBrokenLink.querySelector(
    "input[name='resource']"
  ).value = JSON.stringify({ "@id": event.target.dataset.src });
  formBrokenLink.querySelector(
    "input[name='submitter']"
  ).value = JSON.stringify({ "@id": userWhoSubmitReport });
}

function addProperFilterToSearchComponents(targetId) {
  var baseElement = document.getElementById(targetId);
  var forms = baseElement.querySelectorAll(".resource_by_step");
  forms.forEach(form => {
    form.addEventListener("populate", e => {
      //Manage fake tabs
      let tabs = baseElement.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 = baseElement.querySelectorAll(".search-by-keyword")[0];
      let keyword_field = keyword_form.querySelector(
        `input[name="name_keyword"]`
      );

      let keyword_submit = baseElement.querySelectorAll(" .keyword_submit")[0];
      let keyword_hidden_fields = baseElement.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);
          let parent_form = hidden_field.closest("sib-form");
          parent_form.component.inputChange();
          refreshPagination();
        });
      });

      //SEARCH IN DATABASE INSTANCE ONLY
      let instance_only = baseElement.querySelectorAll(
        ".instance_database_only"
      )[0];
      let checkbox_instance_only = instance_only.querySelector("input");
      if (checkbox_instance_only) {
        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 = baseElement.querySelectorAll(
        ".more_criterias"
      )[0];

      // https://git.happy-dev.fr/startinblox/framework/sib-core/issues/453
      window.setTimeout(() => {
        //Manage fake tabs for type
        let tabs = baseElement.getElementsByClassName("filter_by_type");
        for (let tab of tabs) {
          tab.addEventListener(
            "click",
            function() {
              selectHiddenManagementForType(tab, form)
            }
          );
        }

        //To retrieve format
        let format_field_search = more_criterias_form.querySelector(
          `select[name="format"]`
        );
        let format_hidden_field = baseElement.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] select[name="format"]'
        );

        //TODO: The first time the event is not call.
        if (format_field_search) {
          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);
            });
          };
        }

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

        if (language_field_search) {
          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);
            });
          };
        }

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

        if (language_field_search) {
          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);
            });
          };
        }

        //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 = baseElement.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] input[name="publication_year"]'
        );

        if (year_field_search) {
          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 = baseElement.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] input[name="country"]'
        );

        if (country_field_search) {
          country_field_search.addEventListener("input", function() {
            country_hidden_fields.forEach(field => {
              inputHiddenManagement(field, country_field_search, form);
            });
          });
        }
      }, 1000);
    });
  });
}

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("entrepreneur_profile_creation", "user-account-picture");
  refreshList("mentor_profile_creation", "mentor_info");
  refreshList("mentor_profile_creation", "mentor_complementary");
  refreshList("mentor_profile_creation", "mentor_contact");
  refreshList("mentor_profile_creation", "user-account-picture");
  refreshList("entrepreneur_profile_edition", "entrepreneur_info");
  refreshList("entrepreneur_profile_edition", "entrepreneur_contact");
  refreshList("entrepreneur_profile_edition", "user-account-picture");
  refreshList("mentor_profile_edition", "mentor_info");
  refreshList("mentor_profile_edition", "mentor_complementary");
  refreshList("mentor_profile_edition", "mentor_contact");
  refreshList("mentor_profile_edition", "user-account-picture");

  var header_dropdown = $(".dropdownWrapper"),
    drop_choices = header_dropdown.find(".dropdownLabel");

  if (drop_choices) {
    drop_choices.on("click", function(e) {
      e.stopPropagation();
      var element = $(this).parent();
      element.find(".dropdownPanel").fadeToggle(500);
    });

    $("body").click(function() {
      $(".dropdownPanel").hide(500);
    });
  }

  //Manage the logout action
  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);
    });
  }

  //MENTOR DASHBOARD*************************************************************
  window.setTimeout(() => {
    //Manage the form to report broken link.
    let detailsMentor = document.getElementById("detail-mentor");
    detailsMentor.addEventListener("populate", event => {
      var userWhoSubmitReport =  userAccountDataSrc.dataset.src
      var formBrokenLink = document.getElementById("report-broken-link-mentor");
      fillReportBrokenLinkForm(event, userWhoSubmitReport, formBrokenLink);
    });

    var forms = document.querySelectorAll("sib-form");
    forms.forEach(form => {
      form.addEventListener("populate", e => {
        var previewImage = document.querySelectorAll(
          "sib-form-file input[name='preview_image']+input"
        );
        var previewlabel = document.querySelectorAll("sib-form-file div");
        for (let item of previewlabel) {
          item.innerHTML="Upload a file"
        }

        for (let item of previewImage) {
          item.addEventListener("change", loadFile);
        }
      });

      //Manage the accordion in request mentor dashboard.
      var accRequest = document.querySelectorAll(
        "#requests accordion-request-resource"
      );

      for (let i = 0; i < accRequest.length; i++) {
        accRequest[i].addEventListener("click", function() {
          /* Toggle between adding and removing the "active" class,
      to highlight the button that controls the panel */
          this.classList.toggle("active");

          /* Toggle between hiding and showing the active panel */
          var panelRequest = this.nextElementSibling;
          if (panelRequest.style.maxHeight) {
            panelRequest.style.maxHeight = null;
          } else {
            panelRequest.style.maxHeight = panelRequest.scrollHeight + "px";
          }
        });
      }

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

  //ENTREPRENEUR DASHBOARD*************************************************************

  window.setTimeout(() => {
    //Manage the form to report broken link.
    let detailsEntrepreneur = document.getElementById("detail-entrepreneur");
    detailsEntrepreneur.addEventListener("populate", event => {
      var formBrokenLink = document.getElementById("report-broken-link-entrepreneur");
      var userWhoSubmitReport =  userAccountDataSrc.dataset.src
      fillReportBrokenLinkForm(event, userWhoSubmitReport, formBrokenLink);
    });

    //Accordion by step
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");

        var panel = this.nextElementSibling.querySelector("sib-form + div");

        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }
  }, 2000);

  //In the entrepreneur dashboard, we set data from the display form to the hidden ones.
  addProperFilterToSearchComponents("entrepreneur-resource-list");
  addProperFilterToSearchComponents("mentor-database");
  addProperFilterToSearchComponents("public-resource-list");
});