document.addEventListener('DOMContentLoaded', function() {
  const CONTAINER_MODULE_LIST = document.getElementById('module_list');
  window.info = JSON.parse(document.querySelector('[data-info]').getAttribute('data-info'));

  language.add(info.languages);
  language.load('module/futuragrade');

  let moduleId = CONTAINER_MODULE_LIST.querySelectorAll('js-grade').length + 1;

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

  function removeModule(context) {
    context = context || document;
    let removeButtons = context.querySelectorAll('.js-remove-grade');
    for (let i = 0; i < removeButtons.length; i++) {
      removeButtons[i].addEventListener('click', function() {
        this.closest('.js-grade').remove();
      });
    }
  }

  removeModule();

  const MODULES = info.modules;

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

  function addModule(module = { description: {} }) {
    const { layout_id, position, status, sort_order } = module;
    const MODULE_CONTAINER = document.createElement('div'),
      STATUS_LIST = window.Type_Status.getEnumList(),
      POSITIONS = window.Type_ModulePosition.getEnumList(),
      LAYOUTS = window.info.layouts,
      HTML = `
        <div class="row x-small-space-xs">
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${window.language.get('entry_layout')}</span>
              <select class="field-entry" name="futuragrade_module[${moduleId}][layout_id]">
                ${Object.keys(LAYOUTS).map(
                  key => `<option value="${LAYOUTS[key].layout_id}" ${layout_id == LAYOUTS[key].layout_id ? 'selected' : ''}>
                ${LAYOUTS[key].name}
              </option>`
                ).join('')}
              </select>
            </label>
          </div>
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${window.language.get('entry_position')}</span>
              <select class="field-entry" name="futuragrade_module[${moduleId}][position]">
                ${Object.keys(POSITIONS)
                  .map(key => `<option value="${key}" ${position == key ? 'selected' : ''}>${POSITIONS[key]}</option>`)
                  .join('')}
              </select>
            </label>
          </div>
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${window.language.get('entry_status')}</span>
              <select class="field-entry" name="futuragrade_module[${moduleId}][status]">
                ${Object.keys(STATUS_LIST)
                  .map(key => `<option value="${key}" ${status == key ? 'selected' : ''}>${STATUS_LIST[key]}</option>`)
                  .join()}
              </select>
            </label>
          </div>
          <div class="col-md-width-auto">
            <label class="field field-medium">
              <span class="field-label">${window.language.get('entry_sort_order')}</span>
              <input class="field-entry mask-number2" type="text" name="futuragrade_module[${moduleId}][sort_order]"
              value="${typeof sort_order !== 'undefined' ? sort_order : ''}" size="1">
            </label>
          </div>
          <div class="col-md-width-auto">
            <div class="padding-medium cursor-pointer top-margin-medium js-remove-grade" data-tooltip="${window.language.get(
              'button_remove'
            )}">
              <i class="fas fa-trash text-gray"></i>
            </div>
          </div>
        </div>`;

    MODULE_CONTAINER.setAttribute(
      'class',
      'background-white padding-large bottom-margin-medium shadow-small adm-focus-within js-grade'
    );
    MODULE_CONTAINER.innerHTML = HTML;
    CONTAINER_MODULE_LIST.prepend(MODULE_CONTAINER);

    removeModule(MODULE_CONTAINER);

    moduleId++;
  }
});
