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

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

  let newModuleId = containerCarouselList.querySelectorAll('.js-carousel').length + 1;

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

  initRemoveCarousel(containerCarouselList);

  function initRemoveCarousel(context) {
    context = context || document;
    var carouselList = context.querySelectorAll('.js-remove-carousel');
    for (let i = 0; i < carouselList.length; i++) {
      carouselList[i].onclick = removeCarousel;
    }
  }

  function removeCarousel() {
    var id = this.getAttribute('data-carousel-id');
    document.getElementById(id).remove();
  }

  function addModule() {
    const LAYOUTS = info.layouts,
      STATUS_LIST = Type_Status.getEnumList(),
      POSITIONS = Type_ModulePosition.getEnumList(),
      TAMANHO = Type_Tamanho.getEnumList(),
      YES_OR_NO = Type_DsimDnao.getEnumList(),
      AUTO_OR_MANUAL = Type_AutoOrManual.getEnumList(),
      BANNERS = info.banners,
      MODULE_CONTAINER = document.createElement('div'),
      HTML = `
        <div class="row x-small-space-xs">
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${language.get('entry_banner')}</span>
              <select class="field-entry" name="carousel_module[${newModuleId}][banner_id]">
                ${BANNERS.map(banner => `<option value="${banner.banner_id}">${banner.name}</option>`).join('')}
              </select>
            </label>
          </div>
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${language.get('entry_size_space')}</span>
              <select class="field-entry" name="carousel_module[${newModuleId}][tamanho]">
                ${Object.keys(TAMANHO)
                  .map(key => `<option value="${key}}">${TAMANHO[key]}</option>`)
                  .join('')}
              </select>
            </label>
          </div>
          <div class="col-md-width-auto">
            <label class="field field-medium">
              <span class="field-label">${language.get('entry_full_screen')}</span>
              <select class="field-entry" name="carousel_module[${newModuleId}][type]">
                ${Object.keys(YES_OR_NO)
                  .map(key => `<option value="${key}}">${YES_OR_NO[key]}</option>`)
                  .join('')}
              </select>
            </label>
          </div>
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${language.get('entry_scroll')}</span>
              <select class="field-entry" name="carousel_module[${newModuleId}][scroll]">
                ${Object.keys(AUTO_OR_MANUAL)
                  .map(key => `<option value="${key}">${AUTO_OR_MANUAL[key]}</option>`)
                  .join('')}
              </select>
            </label>
          </div>
          <div class="col-md-width-auto">
            <label class="field field-medium">
              <span class="field-label required">${language.get('entry_image')}</span>
              <div class="field-entry-group">
                <input class="field-entry" type="text" name="carousel_module[${newModuleId}][width]" value="" size="1" />
                <input class="field-entry" type="text" name="carousel_module[${newModuleId}][height]" value="" size="1" />
              </div>
            </label>
          </div>
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${language.get('entry_layout')}</span>
              <select class="field-entry" name="carousel_module[${newModuleId}][layout_id]">
                ${LAYOUTS.map(layout => `<option value="${layout.layout_id}">${layout.name}</option>`).join('')}
              </select>
            </label>
          </div>
          <div class="col-md">
            <label class="field field-medium">
              <span class="field-label">${language.get('entry_position')}</span>
              <select class="field-entry" name="carousel_module[${newModuleId}][position]">
                ${Object.keys(POSITIONS)
                  .map(key => `<option value="${key}">${POSITIONS[key]}</option>`)
                  .join('')}
              </select>
            </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="carousel_module[${newModuleId}][status]">
                ${Object.keys(STATUS_LIST)
                  .map(key => `<option value="${key}">${STATUS_LIST[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" type="text" name="carousel_module[${newModuleId}][sort_order]" value="" size="1">
            </label>
          </div>
          <div class="col-xs-12 col-md-width-auto">
            <div class="padding-medium cursor-pointer top-margin-medium js-remove-carousel" data-tooltip="${language.get(
              'button_remove'
            )}" data-carousel-id="${newModuleId}">
              <i class="fas fa-trash text-gray"></i>
            </div>
          </div>
        </div>`;

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

    containerCarouselList.prepend(MODULE_CONTAINER);
    initRemoveCarousel(MODULE_CONTAINER);

    newModuleId++;
  }
});
