function show(node, force = true) {
  if (force || node.style.display === "none") {
    node.style.display = node.saved_display || "block";
  }
}

function hide(node) {
  node.saved_display = node.style.display;
  node.style.display = "none";
}

function toggle(node) {
  if (node.style.display === "none") {
    show(node);
  } else {
    hide(node);
  }
}

Array.toObject = function (arr) {
  return arr.reduce((base, current) => {
    base[current[0]] = current[1];
    return base;
  }, {});
};

function __map__(cb = (e) => e) {
  const arr = [];
  for (i = 0; i < this.length; i++) {
    arr.push(cb(this[i]));
  }
  return arr;
}

HTMLCollection.prototype.map = __map__;
NodeList.prototype.map = __map__;
NamedNodeMap.prototype.map = __map__;
HTMLInputElement.prototype.attributesObject = function () {
  return Array.toObject(this.attributes.map((attr) => [attr.name, attr.value]));
};
HTMLFormElement.prototype.attributesObject = function () {
  return Array.toObject(this.attributes.map((attr) => [attr.name, attr.value]));
};

function parseCookie(str) {
  return str
    .split(";")
    .map((v) => v.split("="))
    .reduce((acc, v) => {
      if (v.length == 2) acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
      return acc;
    }, {});
}

function userpexValidation(event) {
  event.preventDefault();

  const attributes = event.target.attributesObject();

  const fields = event.target.childNodes.map().filter(e => e.nodeName == 'INPUT');
  const fields_attributes = Array.toObject(fields.map(attr => [attr.name, attr.value]));
  const date = parseCookie(document.cookie).date || new Date().toISOString().slice(0, 10);

  ajax({
    method: fields_attributes["type"] == "-" ? "DELETE" : "POST",
    url: `/api/user-pex/v1/pexs/${fields_attributes["id"]}/validation`,
    body: JSON.stringify({ date: date, force_count_total: true }),
    headers: { Accept: "application/json", "Content-Type": "application/json" },
    on_success: (body) => {
      // === Sample how to make dynamic partial replacement ===
      // const target_line = event.target.parentNode.parentElement;
      // ajax({
      //   method: 'GET',
      //   url: `/api/pex/v2/pexs/${fields_attributes["id"]}/more`,
      //   headers: { Accept: "text/html;*/*" },
      //   on_success: (body) => {
      //     target_line.innerHTML = body;
      //     const toggler = target_line.querySelector('.pex-editor-toggler');
      //     setupPexEditorToggler(toggler);
      //   },
      //   on_failure: (body, req) => {
      //     flashError("Error JS#0002 while rendering...");
      //   },
      // });
      const json_body = JSON.parse(body);
      const text_target = event.target.parentNode.parentElement.childNodes[3];
      text_target.textContent = String(json_body.count_total);
      const should_hide_decrease_button = json_body.count_total == 0;
      event.target.parentNode.parentNode.childNodes[2].childNodes[0].hidden = should_hide_decrease_button;
    },
    on_failure: (body, req) => {
      flashError("Error JS#0001 while validating...");
    },
  });
}

function setupPexEditorToggler(toggler) {
  const name = toggler.attributes.name.value;
  const pex_editor = document.querySelector(`.pex-editor[name="${name}"]`);
  hide(pex_editor);
  show(toggler);
  toggler.addEventListener("click", (event) => {
    toggle(pex_editor);
  });
}

document.addEventListener("DOMContentLoaded", (_event) => {
  const editor_togglers = document.querySelectorAll('.pex-editor-toggler');
  editor_togglers.forEach(setupPexEditorToggler);

  const userpexvalidation0 = document.querySelectorAll('.userpexvalidationvalue').map().filter(tag => tag.textContent == "0");
  userpexvalidation0.forEach((tag) => {
    tag.parentNode.parentNode.childNodes[2].childNodes[0].hidden = true;
  });
});