MicroModal.init({
  openClass: "is-open",
  disableScroll: true,
});

// Actions inputs forms
var form_process_actions = document.getElementById("process_actions");

// Modals structure
var modals_container_elements = document.querySelectorAll(".container-modal");
var container_details_plugins = document.getElementById(
  "modal-details-plugins"
);
var container_details_themes = document.getElementById("modal-details-themes");
var container_details_cores = document.getElementById("modal-details-cores");
var container_details_uncategorized = document.getElementById(
  "modal-details-uncategorized"
);
var container_details_inside_plugins = document.getElementById(
  "container-modal-details-plugins"
);
var container_details_inside_themes = document.getElementById(
  "container-modal-details-themes"
);
var container_details_inside_cores = document.getElementById(
  "container-modal-details-cores"
);
var container_details_inside_uncategorized = document.getElementById(
  "container-modal-details-uncategorized"
);

var title_uncategorized = document.getElementById("title-uncategorized");

var btn_save = document.getElementById("btn-save");
var icon_base_path = wpdbt_admin_vars.data.admin_url + "img/icon-";
var icon_el_title_modal = document.getElementById("modal-title-icon");

// Select actions btn
var can_selections_actions = false;
var can_selections_uncategoryzed = false;

var current_list_el = null;

var multiple_message_warning = document.getElementById('warning-multiple');

document.addEventListener("DOMContentLoaded", function (event) {
  processSelectionsStatus();
});

function showModal(element) {

  buildBackUrl();

  if (element.classList.contains("inactive")) {
    return;
  }

  hiddenContentModal();

  let label = element.getAttribute("data-label");
  let modal_type = element.getAttribute("data-modal");
  let individual = element.getAttribute("data-individual");
  let action = element.getAttribute("data-action");
  let current_modal = document.getElementById("modal-" + modal_type);

  btn_save.style.display = "block";
  updateTextSave(modal_type);

  // Details
  if (individual == "details" || individual == "uncategorized") {
    var icon_path = icon_base_path + "details.svg";

    current_list_el = getCurrentListElementValues(element, "detail");

    btn_save.style.display = "none";

    let multiple_values = current_list_el["multiple"] ?? 0;

    // Build modal HTML content for multiple values
    if (multiple_values == true) 
    {

      document.getElementById("modal-details").classList.remove("individual");
      document.getElementById("modal-details").classList.add("multiple");

      let item_multiple = current_list_el;
      let item_multiple_origins = item_multiple.origin;

      item_multiple_origins.forEach(function (origin) {
        item_multiple.origin = origin;
        let type = origin.type;
        let html = generateHtmlCard(item_multiple);
        displayDetails(type, html);
      });

      current_list_el.origin = item_multiple_origins;

      // Build modal HTML content for single value
    } else {
      document.getElementById("modal-details").classList.add("individual");
      document.getElementById("modal-details").classList.remove("multiple");

      // Build HTML card
      let type = current_list_el.origin.type;
      let html = generateHtmlCard(current_list_el);

      if (current_list_el.origin.warning == "yes") {
        type = "uncategorized";
        let slug_choice_value = current_list_el.origin.slug + "$" + current_list_el.origin.type;
        choice_individual_uncategorized.setChoiceByValue(slug_choice_value);
      }

      // If is uncategorized
      if ( current_list_el.origin.name == "Uncategorized" || current_list_el.origin.warning == "yes") 
      {

        var data = [];
        data['names'] = '';
        data['prefixes'] = '';

        switch(wpdbt_admin_vars.data.current_page) 
        {
          case 'tables':
            data.prefixes = current_list_el.prefix;
            data.names = current_list_el.name_without_prefix;
            break;
          default:
            data.names = current_list_el.name;;
        }

        setFormUncategorizedInputs("individual", data);
        title_uncategorized.innerHTML = current_list_el.name;
        slug = "uncategorized-individual";
        html = templateFeedback(current_list_el.feedback, slug);
      }

      displayDetails(type, html);
    }

    // Actions
  } else {
    var icon_path = icon_base_path + modal_type + ".svg";
    current_list_el = getCurrentListElementValues(element, "action");

    processDataOnActions(
      current_modal,
      modal_type,
      current_list_el,
      individual
    );
  }

  title_modal.innerHTML = label;
  icon_el_title_modal.setAttribute("src", icon_path);
  current_modal.style.display = "block";

  MicroModal.show("modal-1");
}

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

function getCurrentListElementValues(element, mode) {
  // TODO: retrieve the element with the same attribute

  // Details origin
  if (mode == "detail") {

    let id = element.getAttribute(KEY_ATRIBUTE);

    if(wpdbt_admin_vars.data.current_page == 'cronjobs'){
      id = escapeHtml(id);
    }

    let list_element = list.get(KEY_ATRIBUTE, id);
    return list_element[0]._values;
  }

  // Buttons actions
  if (mode == "action") {
    let individual = element.getAttribute("data-individual");

    if (individual == "yes") {
      let parent = element.parentElement.parentElement;
      let key = parent.querySelectorAll("." + KEY_ATRIBUTE)[0].getAttribute("data-" + KEY_ATRIBUTE);

      if(wpdbt_admin_vars.data.current_page == 'cronjobs'){
        key = escapeHtml(key);
      }

      let list_element = list.get(KEY_ATRIBUTE, key);

      if (MODE_GENERAL === true) {
        list_element = list.get(KEY_ATRIBUTE, key);
      }
      return list_element[0]._values;
    } else {
      let list_items_check = list.get("check", true);
      return list_items_check;
    }
  }
}

function processDataOnActions(current_modal, modal_type, elements, individual) {


  multiple_message_warning.style.display = "none";

  btn_save.style.display = "block";

  // Build uncategorized HTML for modal actions
  if (modal_type == "uncategorized") {
    btn_save.style.display = "none";
    // Uncategorized group
    slug = "uncategorized-group";
    html = templateFeedback(false, slug);
    displayDetails("uncategorized-group", html);
  }

  // Affected Records
  let affected_records_list = current_modal.querySelector(
    ".container_affected_records_list"
  );
  affected_records_list.innerHTML = "";

  // Single selection
  if (individual == "yes") {

    if(current_list_el.multiple == true){
      multiple_message_warning.style.display = "block";
    }

    // Label origin
    var type_label = '';
    if(wpdbt_admin_vars.data.current_page != 'general'){

      if(current_list_el.multiple == true){
        multiple_message_warning.style.display = "block";
        type_label = '<span id="rows_label" class="multiple">multiple</span>';
      }else{
        type_label = `<span id="rows_label" class="${current_list_el.origin.type}">${current_list_el.origin.type}</span>`;
      }
    
    }

    switch(wpdbt_admin_vars.data.current_page) 
    {
      case 'options':
        form_process_actions.elements["action-keys"].value = elements.name;
        break;
      case 'transients':
        form_process_actions.elements["action-keys"].value = elements.name;
        break;
      case 'tables':
        form_process_actions.elements["action-keys"].value = elements.name_without_prefix;
        form_process_actions.elements["action-prefix"].value = elements.prefix;
        break;
      default:
        form_process_actions.elements["action-keys"].value = elements[KEY_ATRIBUTE];
    }

    form_process_actions.elements["action-is-days"].value = elements["is-days"];
    affected_records_list.innerHTML += `<li class"break-word">${type_label}${current_list_el.name != '' ? current_list_el.name :  current_list_el.id}</li>`;

  } else {

    let current_key = new Array();
    let current_prefix = new Array();
    let current_day = new Array();

    var type_label = '';

    elements.forEach(function (el) {

      if(wpdbt_admin_vars.data.current_page != 'general'){
        if(el._values.multiple == true){
          multiple_message_warning.style.display = "block";
          type_label = '<span id="rows_label" class="multiple">multiple</span>';
        }else{
          type_label = `<span id="rows_label" class="${el._values.origin.type}">${el._values.origin.type}</span>`;
        }
      }

      switch(wpdbt_admin_vars.data.current_page) 
      {
        case 'options':
          var key_list = el._values.name;
          break;
        case 'transients':
          var key_list = el._values.name;
          break;
        case 'tables':
          var key_list = el._values.name_without_prefix;
          var key_prefix = el._values.prefix;
          break;
        default:
          var key_list = el._values[KEY_ATRIBUTE];
      }
  
      current_key.push(key_list);
      current_prefix.push(key_prefix);

      let day_list = el._values["is-days"];
      current_day.push(day_list);

      if (modal_type == "uncategorized") {
        if (
          el._values.origin.name == "Uncategorized" ||
          el._values.origin.warning == "yes"
        ) {
          affected_records_list.innerHTML += `<li class"break-word">${type_label}${el._values.name != '' ? el._values.name :  el._values.id}</li>`;
        }
      } else {
        affected_records_list.innerHTML += `<li class"break-word">${type_label}${el._values.name != '' ? el._values.name :  el._values.id}</li>`;
      }
    });

    form_process_actions.elements["action-keys"].value = current_key.join('↕');
    form_process_actions.elements["action-prefix"].value = current_prefix.join('↕');
    form_process_actions.elements["action-is-days"].value = current_day.join('↕');
  }

  form_process_actions.elements["action-type"].value = modal_type;
  form_process_actions.elements["action-individual"].value = individual;
}

function hiddenContentModal() {
  // All containers modals
  modals_container_elements.forEach(function (el) {
    el.style.display = "none";
  });

  // Containers details of modal-details
  container_details_plugins.style.display = "none";
  container_details_themes.style.display = "none";
  container_details_cores.style.display = "none";

  // Containers details inside modal detaisl types
  container_details_inside_themes.innerHTML = "";
  container_details_inside_plugins.innerHTML = "";
  container_details_inside_cores.innerHTML = "";
}

function updateMultipleUncategorized(list) {

  if (MODE_GENERAL === false)
  {

    var data = [];
    data['names'] = [];
    data['prefixes'] = [];

    list.forEach(function (el) {
      if (el._values.origin.name == "Uncategorized" || el._values.origin.warning == "yes"){
    
      switch(wpdbt_admin_vars.data.current_page) 
      {
        case 'tables':
          data.names.push(el._values.name_without_prefix);
          data.prefixes.push(el._values.prefix);
          break;
        default:
          data.names.push(el._values.name);
        }
      }
  
    });

    setFormUncategorizedInputs("group", data );

  }
}

function updateTextSave(txt) {
  btn_save.innerHTML = txt;
}

function setFormUncategorizedInputs(mode, data) {

  if (MODE_GENERAL !== true)
  {
    let forms = document.getElementsByClassName(
      "form-feed-origin-uncategorized-class"
    );

    if (mode == "group") {
      var form = forms[0];
      var current_choice = choice_group_uncategorized._currentState.items.find(
        (selection) => selection.active === true
      );
    }

    if (mode == "individual") {
      var form = forms[1];
      var current_choice =
        choice_individual_uncategorized._currentState.items.find(
          (selection) => selection.active === true
        );
    }

    // Inputs forms
    let input_section = form.elements.section;
    let input_type = form.elements.type;
    let input_name = form.elements.name;
    let input_prefix = form.elements.prefix;

    // Choices
    if (current_choice.value != null) 
    {
      let current_value = current_choice.value.split("$");
      let current_type = current_value[1];

      input_section.value = wpdbt_admin_vars.data.current_page;
      input_type.value = current_type;
    }

    if (mode == "individual" &&  data != null) {

      switch(wpdbt_admin_vars.data.current_page) {
        case 'tables':
          input_name.value = '["' + data.names + '"]';
          input_prefix.value = '["' + data.prefixes + '"]';
          break;
        default:
          input_name.value = '["' + data.names + '"]';
      }

    }


    if (mode == "group" &&  data != null) {

      switch(wpdbt_admin_vars.data.current_page) {
        case 'tables':
          input_name.value = JSON.stringify(data.names);
          input_prefix.value = JSON.stringify(data.prefixes);
          break;
        default:
          input_name.value = JSON.stringify(data.names);
      }

    }

  }
}

function processAction(element) {
  btn_save.classList.add('disabled');
  document.getElementById("process_actions").submit();
}

function displayDetails(type, html) {
  container_details_uncategorized.style.display = "none";

  if (type == "plugin") {
    container_details_plugins.style.display = "block";
    container_details_inside_plugins.innerHTML += html;
  }

  if (type == "theme") {
    container_details_themes.style.display = "block";
    container_details_inside_themes.innerHTML += html;
  }

  if (type == "core") {
    container_details_cores.style.display = "block";
    container_details_inside_cores.innerHTML += html;
  }

  if (type == "uncategorized") {
    container_details_uncategorized.style.display = "block";
    document.getElementById(
      "container-modal-details-uncategorized-feedback-individual"
    ).innerHTML = html;

    if (html.includes("d-none")) {
      document
        .getElementById("container-modal-details-uncategorized-form-individual")
        .classList.remove("d-none");
    } else {
      document
        .getElementById("container-modal-details-uncategorized-form-individual")
        .classList.add("d-none");
    }
  }

  if (type == "uncategorized-group") {
    document.getElementById(
      "container-modal-details-uncategorized-feedback-group"
    ).innerHTML = html;

    if (html.includes("d-none")) {
      document
        .getElementById("container-modal-details-uncategorized-form-group")
        .classList.remove("d-none");
    } else {
      document
        .getElementById("container-modal-details-uncategorized-form-group")
        .classList.add("d-none");
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                  TEMPLATES                                 */
/* -------------------------------------------------------------------------- */

function generateHtmlCard(data_el) {
  let slug = data_el.origin.slug;
  let info = templateInfo(data_el);
  let votes = data_el.feedback == true ? "" : templateVotes(data_el);
  let feedback = templateFeedback(data_el.feedback, slug);
  let prefix = (wpdbt_admin_vars.data.current_page == 'tables') ? data_el.prefix : '';
  let input_name = (wpdbt_admin_vars.data.current_page == 'tables') ? data_el.name_without_prefix : data_el.name;
  let form = templateFeedOrigin(
    prefix,
    data_el.origin.type,
    data_el.origin.slug,
    input_name,
    data_el.origin.reliability
  );
  let html = buildCard(votes, form, feedback, info);

  return html;
}

function buildCard(votes, form, feedback, info) {
  return (
    "<div class='card-details'>\
				<div class='d-flex-between mb-10'>\
					" +
    info +
    "\
				</div>\
				" +
    votes +
    "\
				" +
    feedback +
    "\
				" +
    form +
    "\
			</div>"
  );
}

/* -------------------------------------------------------------------------- */
/*                                HOVER IMAGES                                */
/* -------------------------------------------------------------------------- */

function hover(element) {
  element.setAttribute(
    "src",
    wpdbt_admin_vars.data.admin_url + "img/icon-" +
      element.dataset.type +
      "-fill.svg"
  );
}

function unhover(element) {
  element.setAttribute(
    "src",
    wpdbt_admin_vars.data.admin_url + "img/icon-" +
      element.dataset.type +
      ".svg"
  );
}

/* -------------------------------------------------------------------------- */
/*                                   SELECT                                   */
/* -------------------------------------------------------------------------- */

function updateFormUncategorized(element) {
  let mode = element.getAttribute("data-type"); // individual | group
  setFormUncategorizedInputs(mode, null);
}

/* -------------------------------------------------------------------------- */
/*                                   CHECKED                                  */
/* -------------------------------------------------------------------------- */



function checkAll(element) {
  let check_status = element.checked;

  for (var i = 0; i < checkbox_elements.length; ++i) {
    checkbox_elements[i].checked = check_status;
    list.visibleItems[i]._values.check = check_status;
  }

  let list_items_check = list.get("check", true);

  updateMultipleUncategorized(list_items_check);
  processSelectionsStatus();
  displaySelection();
}

function checkSelected(element) {
  let check_status = element.checked;

  let parent = element.parentElement.parentElement;

  let id = parent
    .querySelectorAll("." + KEY_ATRIBUTE)[0]
    .getAttribute("data-" + KEY_ATRIBUTE);

  if(wpdbt_admin_vars.data.current_page == 'cronjobs'){
    id = escapeHtml(id);
  }
  let list_element = list.get(KEY_ATRIBUTE, id)[0];

  element.setAttribute("data-check", check_status);
  list_element._values["check"] = check_status;

  let list_items_check = list.get("check", true);

  checkbox_all.checked = list_items_check.length != 0;

  updateMultipleUncategorized(list_items_check);
  processSelectionsStatus();
  displaySelection();
}

// allows the selection of buttons in batch actions
function setCanSelect() {
  let list_items_check = list.get("check", true);

  can_selections_actions = list_items_check.length > 0;

  // Status btn action uncategorized
  if (MODE_GENERAL == false) {
    can_selections_uncategoryzed = false;
    list_items_check.forEach(function (el) {
      if (
        el._values.origin.type == "uncategorized" ||
        el._values.origin.warning == "yes"
      ) {
        can_selections_uncategoryzed = true;
        return;
      }
    });
  }
}

function updateButtonsActions() {
  let btns_actions = document.querySelectorAll(
    ".btn-selections button:not(.uncategorized)"
  );

  btns_actions.forEach(function (el) {
    can_selections_actions === true
      ? el.classList.add("active")
      : el.classList.remove("active");
    !can_selections_actions === true
      ? el.classList.add("inactive")
      : el.classList.remove("inactive");
  });

  let btn_action_uncategorized = document.querySelector(
    ".btn-selections button.uncategorized"
  );
  if (MODE_GENERAL !== true) {
    can_selections_uncategoryzed === true
      ? btn_action_uncategorized.classList.add("active")
      : btn_action_uncategorized.classList.remove("active");
    !can_selections_uncategoryzed === true
      ? btn_action_uncategorized.classList.add("inactive")
      : btn_action_uncategorized.classList.remove("inactive");
  }
}

function processSelectionsStatus() {
  setCanSelect();
  updateButtonsActions();
}

function encodeString(input){
  input = decodeURI(input);
  return encodeURI(input.replace(/[^0-9a-z]/gi, ''));
}