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

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

  let moduleId = '';
  moduleId++;

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

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

  initRemoveModule();

  function removeModule() {
    this.closest('.js-store-rating').remove();
  }

  const MODULES = info.modules;

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

  function addModule(module = {}) {
    const { layout_id, position, status, sort_order } = module;

    const MODULE_CONTAINER = document.createElement('div'),
      LAYOUTS = info.layouts,
      POSITIONS = info.positions,
      STATUS = Type_Status.getEnumList(),
      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="store_rating_module[${moduleId}][layout_id]">
              ${LAYOUTS.map(
                layout =>
                  `<option value="${layout.layout_id}" ${layout.layout_id == layout_id ? 'selected' : ''}>${
                    layout.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="store_rating_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="store_rating_module[${moduleId}][status]">
              ${Object.keys(STATUS)
                .map(key => `<option value="${key}"  ${status == key ? 'selected' : ''}>${STATUS[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-number" type="text" name="store_rating_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-rating" data-tooltip="Remover">
            <i class="fas fa-trash text-gray"></i>
          </div>
        </div>
      </div>`;

    MODULE_CONTAINER.id = moduleId;
    MODULE_CONTAINER.setAttribute(
      'class',
      'background-white padding-large bottom-margin-medium shadow-small adm-focus-within js-store-rating'
    );
    MODULE_CONTAINER.innerHTML = HTML;
    containerStoreRatingList.prepend(MODULE_CONTAINER);

    initRemoveModule(MODULE_CONTAINER);

    moduleId++;
  }
});
