/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX FUNCTIONS XXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/**
 * Manage classic tabs.
 * @param {string} pageName - Id of the tab content
 * @param {HTMLElement} elmnt - Accordion element
 */
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.
 * @param {HTMLElement} elmnt - Active fake tab.
 */
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");
  }

  // Show the specific tab content
  elmnt.classList.add("active");
}

/**
 * Set a preview image on load.
 * @param {event} event - On file loading.
 */
function loadFile(event) {
  //Création of the preview
  var elt = document.createElement("img");
  elt.src = URL.createObjectURL(event.target.files[0]);

  //Remove the default useless image.
  var labeltag = event.target.closest("label");
  labeltag.querySelector("input[name='preview_image']").style.display = "none";

  //If there is already a image previewed, remove it.
  if (labeltag.querySelector("img")) {
    var oldImage = labeltag.querySelector("img");
    labeltag.removeChild(oldImage);
  }

  //Add the previewimage
  labeltag.insertAdjacentElement("afterbegin", elt);
}

/**
 * Fill datas to a form.
 * @param {HTMLElment} element - Element with the datas to retrieve.
 * @param {string} targetFormName - Id of the form to fill.
 * @param {string} inputName - Name of the input to fill in the form.
 */
function linkDatasetToField(element, 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": element.dataset.src });
      resourceField.setAttribute(
        "value",
        JSON.stringify({ "@id": element.dataset.src })
      );
    }
  });
}

/**
 * Refresh information after a form submission
 * @param {String} formId - Id of the sumitted form
 * @param {String} listId  - Id of the list to refresh
 */
function refreshList(formId, listId) {
  let form = document.getElementById(formId);
  form.addEventListener("save", event => {
    let list = document.getElementById(listId);
    console.log(list, list.component);
    list.dataset.src = list.dataset.src;
    list.component.resource.clearCache();
  });
}

/**
 * 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
        .closest(".step")
        .querySelector(".accordion:not(.active)")
    ) {
      resources_container.nextSibling.setAttribute("hidden", "hidden");
      resources_container.nextSibling.setAttribute("style", "display:none");
    } else {
      resources_container.nextSibling.setAttribute("style", "display:flex");
    }
  }
}

/**
 * Manage select hidden to fullfill them with more "more criterias" selection
 * @param {HTMLElement} select_hidden - Hidden select to fullfill.
 * @param {HTMLElement} option_selected - Option selcted to set in hidden select.
 */
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
 * @param {HTMLElement} field - Hidden field to fullfill.
 * @param {HTMLElement} field_search - Field with the value wanted by the user.
 */
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
 * @param {HTMLElement} tab - Selected type tabs.
 * @param {HTMLElement} form - Hidden form to fullfill.
 */
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();
    });
  }
}

/**
 * Init type to type 1
 */
function InitManagementForType() {
  var forms = document.querySelectorAll(".resource_by_step");

  forms.forEach(form => {
    form.addEventListener(
      "populate",
      e => {
        window.setTimeout(() => {
          let type_hidden_field = form.querySelectorAll('select[name="type"]');
          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": "http://localhost:8000/types/1/"}') {
                //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();
          });
        });
      },
      3000
    );
  });
}

/**
 * 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 });
}

/**
 * Manage the accordion for step in entrepreneur dashboard
 */
function manageAccordionByStep(){
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      if (this.classList.contains("active") == true) {
        this.classList.remove("active");
        this.nextElementSibling.querySelector(
          "sib-form + div"
        ).style.maxHeight = "0px";
      } else {
        this.classList.add("active");
      }

      this.closest(".step")
        .querySelector("nav")
        .removeAttribute("hidden");
      refreshPagination();

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

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

/**
 * Manage the accordion for requested resources in the mentor dashboard
 */
function manageAccordionForRequest() {
  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 (!this.classList.contains("active")) {
        panelRequest.style.maxHeight = null;
        refreshPagination();
      } else {
        panelRequest.style.maxHeight = panelRequest.scrollHeight + "px";
      }
    });
  }
}

/**
 * Manage the action of the logout button
 */
function manageLogoutButton() {
  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);
    });
  }
}

/**
 * Manage the select language
 */
function manageSelectLanguage() {
  const languageSelects = document.getElementsByClassName("languageChoice")
  for (let item of languageSelects) {
    item.addEventListener("change", function() {
      //We listen the selected option for the language
      uriLanguge = item.querySelector("option:checked").value

      //We retrieve element of the url
      var pathAfterThePrefix = window.location.pathname.split('/')[2];
      var base_url = location.host

      //If the selected language is french
      if (uriLanguge === '{"@id": "http://localhost:8000/languages/1/"}') {
        //Redirection with the appropriate prefixe.
        var redirect = "http://"+base_url+'/fr/'+pathAfterThePrefix

        document.location.href = redirect
      } else {
        var redirect = "http://"+base_url+'/en/'+pathAfterThePrefix
        document.location.href = redirect
        
      }
      
    })
  }
  
}

/**
 * Initi the custom form file behaviour
 * Todo : we can improve the performance adding param to reduce the loop
 */
function initFileUpload(){
  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 like sender hidden form
 * @param {*} event 
 * @param {*} userWhoSubmitLike 
 * @param {*} formSenderLike 
 */
function fillSenderLike(userWhoSubmitLike, formSenderLike, currentResource) {
  formSenderLike.querySelector(
    "input[name='sender']"
  ).value = JSON.stringify({ "@id": userWhoSubmitLike });
  formSenderLike.querySelector(
    "input[name='receiver_object_id']"
  ).value = JSON.stringify({ "@id": currentResource });
  receiver_object_id
}

/**
 * For entrepreneur dashboard only :
 * As we cannot have multiple imbricated filtering with the native sib-display, we manage it manually.
 * @param {String} targetId - Id of the element to update
 */
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);
      }

      //Manage the pagination
      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"]`
      );

      if (keyword_field) {
        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);
            hidden_field.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);
    });
  });
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX ON LOAD XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

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

  //init the fitering by step
  // InitManagementForType();

  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();

  //Retrieve the current user
  let userAccountDataSrc = document.getElementById("user-account-picture");

  if (userAccountDataSrc) {
    //Add the current user as reviewer.
    linkDatasetToField(userAccountDataSrc, "validation-form", "reviewer");
    linkDatasetToField(userAccountDataSrc, "improvement-dialog-form", "reviewer");
    linkDatasetToField(userAccountDataSrc, "refusal-dialog-form", "reviewer");
    linkDatasetToField(userAccountDataSrc, "change_status_request", "reviewer");
    // linkDatasetToField(userAccountDataSrc, "add-like", "sender");
    // linkDatasetToField(userAccountDataSrc, "add-dislike", "sender");
  }

  //On form submission, we sometime have to refresh a list.
  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", "entrepreneur-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", "entrepreneur-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");
  refreshList("change_status_request", "request-list");

  addProperFilterToSearchComponents("entrepreneur-resource-list");
  addProperFilterToSearchComponents("mentor-database");
  addProperFilterToSearchComponents("public-resource-list");

  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
  manageLogoutButton();

  //Manage the select language
  manageSelectLanguage();

  /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXX MENTOR DASHBOARD XXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
  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);

      // // Fill the hidden like-form
      // document.querySelector('sib-auth').getUser().then(data=> {
      //   let targetFormLike = document.getElementById('add-like');
      //   targetFormLike.addEventListener("populate", event => {
      //     let resourceField = targetFormLike.querySelector(`input[name="sender"]`);
      //     if (resourceField) {
      //       resourceField.value = JSON.stringify(data);
      //       resourceField.setAttribute(
      //         "value",
      //         JSON.stringify(data)
      //       );
      //     }
      //   });
      //   let targetFormDislike = document.getElementById('add-dislike');
      //   targetFormDislike.addEventListener("populate", event => {
      //     let resourceField = targetFormDislike.querySelector(`input[name="sender"]`);
      //     if (resourceField) {
      //       resourceField.value = JSON.stringify(data);
      //       resourceField.setAttribute(
      //         "value",
      //         JSON.stringify(data)
      //       );
      //     }
      //   });
        
      // })
      
    });

    //Init the form file behaviour
    initFileUpload()

    //Manage the accordion in request mentor dashboard.
    manageAccordionForRequest()

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

  }, 3000);

  /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXX ENTREPRENEUR DASHBOARD XXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

  window.setTimeout(() => {
    //Manage accordion by step
    manageAccordionByStep();

    //Init the form file behaviour
    initFileUpload();

    //Correct the native default of pagination
    refreshPagination();
  }, 3000);
});