if (document.readyState === 'complete') {
  init();
  displayError();
} else {
  document.addEventListener('DOMContentLoaded', function() {
    init();
    displayError();
  });
}

function init() {
  window.info = JSON.parse(document.querySelector('[data-info]').getAttribute('data-info'));
  window.containerModuleList = document.getElementById('container_modules');

  window.language.add(window.info.languagesJS);
  window.language.load('module/produtosrelacionados');

  document.getElementById('add_module').onclick = addModule;

  const MODULES = window.info.modules;

  for (const key in MODULES) {
    addModule(MODULES[key]);
  }
}

function displayError() {
  const title = document.getElementById('produtosrelacionados_title');
  const msgError = document.getElementById('msgError');

  title.addEventListener('input', event => {
    if (event.target.value.length == 1 && event.target.value == ' ') {
      event.target.value = event.target.value.trim();
      title.classList.add('error-field-list-school');
      msgError.classList.remove('hidden');
    } else if (event.target.value.length < 1) {
      title.classList.add('error-field-list-school');
      msgError.classList.remove('hidden');
    } else {
      title.classList.remove('error-field-list-school');
      msgError.classList.add('hidden');
    }
  });
}

let moduleId = '';
moduleId++;

function initRemoveModule(context) {
  context = context || document;
  let removeButtons = context.querySelectorAll('.js-remove-module');
  for (let i = 0; i < removeButtons.length; i++) {
    removeButtons[i].onclick = removeModule;
  }
}

function removeModule() {
  this.closest('.js-module-row').remove();
}

function controlGrid(context) {
  context = context || document;
  let gridEntries = context.querySelectorAll('.js-control-grid');
  for (let i = 0; i < gridEntries.length; i++) {
    const GRID = gridEntries[i];
    GRID.dispatchEvent(new Event('change', { bubbles: true }));
  }
}

function addModule(module = {}) {
  const { position, status, sort_order, limit, entry_type } = module;
  const CONTAINER_MODULE = document.createElement('div'),
    POSITIONS = window.info.positions,
    TYPES = Type_DsimDnao.getEnumList(),
    ERROR_GRID = window.info.error_grid_limit,
    ERROR_LIMIT = window.info.error_limit,
    STATUS = Type_Status.getEnumList(),
    ERROR_SORT_ORDER = window.info.error_sort_order,
    HTML = `<div class="row x-small-space-xs">
      <div class="col-md">
        <label class="field field-medium">
          <span class="field-label">${language.get('entry_position')}</span>
          <select name="produtosrelacionados_module[${moduleId}][position]" class="field-entry js-control-position">
          ${Object.keys(POSITIONS)
            .map(key => `<option value="${key}" ${key == position ? 'selected' : ''}>${POSITIONS[key]}</option>`)
            .join('')}
          </select>
        </label>
      </div>
      <div class="col-md">
        <label class="field field-medium">
          <span class="field-label">${language.get('entry_type')}</span>
          <select class="field-entry js-control-grid" name="produtosrelacionados_module[${moduleId}][entry_type]"
            ${position !== 'undefined' && position == Type_ModulePosition.Tp_ColumnLeft ? 'disabled=true' : ''}}>
            ${Object.keys(TYPES)
              .map(key => `<option value="${key}" ${key == entry_type ? 'selected' : ''}>${TYPES[key]}</option>`)
              .join('')}
          </select>
        </label>
      </div>
      <div class="col-md-width-auto">
        <label class="field field-medium">
          <span class="field-label">${language.get('entry_limit')}</span>
          <input type="text" size="1" class="field-entry js-control-limit mask-number2" name="produtosrelacionados_module[${moduleId}][limit]"
            value="${typeof limit !== 'undefined' ? limit : Type_DefaultValues.Tp_LimitModules24}"
            ${
              entry_type !== 'undefined' &&
              entry_type == Type_DsimDnao.Tp_Nao &&
              position !== 'undefined' &&
              position != Type_ModulePosition.Tp_ColumnLeft
                ? 'disabled=true'
                : ''
            }>
          ${ERROR_GRID[moduleId] ? `<span class="text-error text-small">${ERROR_GRID[moduleId]}</span>` : ''}
          ${ERROR_LIMIT[moduleId] ? `<span class="text-error text-small">${ERROR_LIMIT[moduleId]}</span>` : ''}
        </label>
      </div>
      <div class="col-md">
        <label class="field field-medium">
          <span class="field-label">${language.get('entry_status')}</span>
          <select class="field-entry" name="produtosrelacionados_module[${moduleId}][status]">
          ${Object.keys(STATUS)
            .map(key => `<option value="${key}" ${key == status ? 'selected' : ''}>${STATUS[key]}</option>`)
            .join('')}
          </select>
        </label>
      </div>
      <div class="col-md-width-auto">
        <label class="field field-medium">
          <span class="field-label">${language.get('entry_sort_order')}</span>
          <input class="field-entry mask-number2" type="text" name="produtosrelacionados_module[${moduleId}][sort_order]"
          value="${typeof sort_order !== 'undefined' ? sort_order : 0}" size="1">
          ${
            ERROR_SORT_ORDER[moduleId] ? `<span class="text-error text-small">${ERROR_SORT_ORDER[moduleId]}</span>` : ''
          }
        </label>
      </div>
      <div class="col-xs-12 col-md-width-auto">
        <div class="padding-medium cursor-pointer top-margin-medium js-remove-module"
        data-tooltip="${language.get('button_remove')}"
        >
          <i class="fas fa-trash text-gray"></i>
        </div>
      </div>
    </div>`;

  CONTAINER_MODULE.setAttribute(
    'class',
    'background-white padding-large bottom-margin-medium shadow-small adm-focus-within js-module-row'
  );
  CONTAINER_MODULE.innerHTML = HTML;
  window.containerModuleList.prepend(CONTAINER_MODULE);
  initRemoveModule(CONTAINER_MODULE);
  controlGrid(CONTAINER_MODULE);

  moduleId++;
}
