class FileManager {
  constructor(thumb, field, options = {}) {
    this.onlyFileManager = field && thumb;
    this.field = field;
    this.thumb = thumb;
    this.options = options;
    this.token = document.body.dataset.token;
    this.noImage = JSON.parse(document.body.dataset.globals).no_image;

    if (this.onlyFileManager) {
      this.setThumb();
    }

    this.initEvents();
  }

  initEvents() {
    (this.options.displayElement || this.thumb).addEventListener('click', this.displayFileManager.bind(this));

    if (this.options.removeElement && typeof this.options.removeElement !== 'undefined') {
      this.options.removeElement.addEventListener('click', this.removeFile.bind(this));
    }
  }

  setThumb() {
    this.field.dataset.srcthumb = this.thumb.src;
  }

  renderFileManager() {
    let url = `index.php?route=common/filemanager&token=${this.token}`;

    if (this.field) {
      url += `&field=${encodeURIComponent(this.field.id)}`;
    }

    if (this.options.type !== null) {
      url += `&type=${encodeURIComponent(this.options.type)}`;
    }

    if (this.options.size !== null) {
      url += `&size=${encodeURIComponent(this.options.size)}`;
    }

    if (this.options.typeFile !== null && typeof this.options.typeFile !== 'undefined') {
      url += `&typefile=${encodeURIComponent(this.options.typeFile)}`;
    }

    this.iframe = document.createElement('div');
    this.iframe.id = 'dialog';
    this.iframe.style.padding = '3px 0px 0px 0px';
    this.iframe.innerHTML = `<iframe src="${url}" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe>`;
    document.body.appendChild(this.iframe);
  }

  displayFileManager() {
    const DIALOG = document.getElementById('dialog');

    if (DIALOG) {
      DIALOG.parentNode.removeChild(DIALOG);
    }

    this.renderFileManager();

    $('#dialog').dialog({
      title: 'Gerenciador de Arquivos',
      close: (event, ui) => {
        if (this.field && this.field.value) {
          this.thumb.src = this.field.dataset.srcthumb;
        }
        if (this.options.nameFile !== null && typeof this.options.nameFile !== 'undefined') {
          this.options.nameFile.textContent = this.field.value.slice(this.field.value.indexOf('/') + 1);
        }
        if (typeof this.options.onClose != 'undefined') {
          this.options.onClose();
        }
      },
      bgiframe: false,
      width: 800,
      height: 400,
      resizable: false,
      modal: false,
    });
  }

  removeFile() {
    this.thumb.src = this.noImage;
    this.field.value = '';
    if (typeof this.options.nameFile !== null) {
      this.options.nameFile.textContent = '';
    }
  }
}


class FileManagerVue extends FileManager
{

  initEvents(){

  }
}

const initDisplayFileManager = function(context = document) {
  var $displayFilemanager = context.querySelectorAll('.js-filemanager');

  for (var i = 0; i < $displayFilemanager.length; i++) {
    if ($displayFilemanager[i].classList.contains('js-filemanager-nav')) {
      new FileManager($displayFilemanager[i]);
      continue;
    }

    const $PARENT = $displayFilemanager[i].parentNode,
      $IMAGE = $displayFilemanager[i].tagName === 'IMG' ? $displayFilemanager[i] : $PARENT.querySelector('img'),
      $INPUT = $PARENT.querySelector('input[type="hidden"]'),
      $OPTIONS = {
        type: $IMAGE.dataset.type ? $IMAGE.dataset.type : null,
        removeElement: $PARENT.querySelector('.js-remove-img'),
        displayElement: $displayFilemanager[i],
        size: $IMAGE.dataset.size ? $IMAGE.dataset.size : null,
        typeFile: $IMAGE.dataset.typefile ? $IMAGE.dataset.typefile : null,
        nameFile: $PARENT.querySelector('.js-name-file'),
      };

    new FileManager($IMAGE, $INPUT, $OPTIONS);
  }
};

export {initDisplayFileManager, FileManagerVue};
