/**
 * Symphonia modal dialog pop-up.
 * @param {String} id
 * @param {Object} opts
 * @param {String} opts.title - Title of dialog window.
 * @param {Boolean} opts.force - If dialog element exists, will remove and replace new one.
 * @param {String} opts.text - Text for body of dialog window.
 * @param {String} opts.html - Content (html) for body of dialog window.
 * @param {String} opts.submit - Text of submit button. If provided generate submit button.
 * @param {Boolean} opts.large - Use Large modal
 */
SymphoniaDialog = function (id, opts) {
  const options = $.extend(opts, {});
  if (options["force"] === undefined)
    options["force"] = true;

  this.id = id || 'ajax_modal';
  const m = document.getElementById(this.id);

  // var currentDialog = document.getElementById(this.id + "__symphonia_dialog");
  // if (currentDialog) {
  //   currentDialog.remove();
  // }

  const dialog = document.createElement("div");
  const modalDialog = document.createElement("div");
  modalDialog.className = "modal-dialog";
  if (options["large"]) {
    modalDialog.classList.add("modal-xl")
  }
  dialog.setAttribute("role", "document");

  const content = document.createElement("div");
  content.className = "modal-content";
  const heading = document.createElement("div");
  heading.className = "modal-header";
  const modalTitle = document.createElement("h5");
  modalTitle.className = "modal-title";
  const body = document.createElement("div");

  body.className = "modal-body";
  dialog.id = this.id;
  dialog.className = "modal fade";
  dialog.setAttribute("role", "dialog");

  // =-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-

  this.appendSubmitButton = function (label) {
    const submitButton = document.createElement('button');
    submitButton.onclick = this.submit;
    submitButton.innerText = (label === true) && 'Submit' || label;
    submitButton.className = "btn btn-primary";
    footer.appendChild(submitButton);
    return submitButton;
  };
  this.submit = function () {
    const form = dialog.querySelector("form");
    if (form)
      form.submit();
  };
  this.show = function () {
    // dialog.find(".modal-body > .modal-content-inner-container").css({'max-height': window.innerHeight - 200});
    // dialog.find(".modal-body > .modal-content-inner-container").css({'max-height': window.innerHeight - 200});
    const t = dialog.querySelector(".title");
    if (t && t.innerHTML === '') {
      this.title = modalTitle.innerHTML;
      t.remove();
    }
    $(dialog).modal({keyboard: true}).find("input:last").focus();
  };
  this.hide = function () {
    $(dialog).modal("hide");
  };
  this.destroy = function () {
    this.hide();
    dialog.remove()
  };
  this.setMaxHeightOfContent = function() {
    body.style.overflowY = 'auto';
    body.style.maxHeight = window.innerHeight - 200 + "px";
  };
  // =-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-==-

  modalTitle.innerText = options.title || '';

  const closeButton = document.createElement("button");
  closeButton.className = "close fa fa-times";
  closeButton.dataset['dismiss'] = "modal";
  heading.appendChild(modalTitle);
  heading.appendChild(closeButton);

  if (options.text)
    body.innerText = options.text;
  if (options.html)
    body.innerHTML = options.html;

  if (m) {
    if (body.innerHTML === '')
      body.innerHTML = m.innerHTML;
    // m.remove();
    dialog.id = this.id + '__symphonia_dialog';
  }

  var footer = document.createElement("div");
  footer.className = "modal-footer";
  if (options.submit) {
    this.appendSubmitButton(options.submit);
  }

  content.appendChild(heading);
  content.appendChild(body);
  content.appendChild(footer);
  modalDialog.appendChild(content);
  dialog.appendChild(modalDialog);

  if (options.force) {
    const currentDialog = document.getElementById(dialog.id);
    if (currentDialog)
      currentDialog.remove();
  }
  document.body.appendChild(dialog);

  this.container = modalDialog;
  this.title = modalTitle;
  this.body = body;
  this.footer = footer;
};
SymphoniaDialog.prototype.close = function () {
  this.hide();
};
window.Symphonia.dialog = {
  show: function(IDcontainer, options) {
    const modal = new SymphoniaDialog(IDcontainer, options);
    modal.show();
  }
}