document.addEventListener('DOMContentLoaded', function(event) {
  window.containerBannerList = document.getElementById('js-banner-container');
  window.info = JSON.parse(document.querySelector('[data-info]').getAttribute('data-info'));

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

  initRemoveBanner(containerBannerList);

  document.getElementById('add-banner').onclick = addBanner;
});

function initRemoveBanner(context) {
  var context = context || document,
    controlRemoveBanner = context.querySelectorAll('.js-remove-banner');

  for (let i = 0; i < controlRemoveBanner.length; i++) {
    controlRemoveBanner[i].onclick = removeBanner;
  }
}

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

function addBanner() {
  var id = containerBannerList.querySelectorAll('.js-banner').length + 1,
    html = '';

  html +=
    '<div id="' +
    id +
    '" class="background-white padding-large bottom-margin-medium shadow-small adm-focus-within js-banner">';
  html += '<div class="row x-small-space-xs">';
  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + language.get('entry_banner') + '</span>';
  html += '<select class="field-entry" name="listaescolar_module[' + id + '][banner_id]">';
  for (let i = 0; i < info.banners.length; i++) {
    html += '<option value="' + info.banners[i].banner_id + '">' + info.banners[i].name + '</option>';
  }
  html += '</select>';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + language.get('entry_size_space') + '</span>';
  html += '<select class="field-entry" name="listaescolar_module[' + id + '][tamanho]">';
  for (var key in Type_Tamanho.getEnumList()) {
    html += '<option value="' + key + '">' + Type_Tamanho.getEnumList()[key] + '</option>';
  }
  html += '</select>';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-md-width-auto">';
  html += '<label class="field field-medium" style="width:74px;">';
  html += '<span class="field-label">' + language.get('entry_full_screen') + '</span>';
  html += '<select class="field-entry" name="listaescolar_module[' + id + '][type]">';
  for (var key in Type_DsimDnao.getEnumList()) {
    html += '<option value="' + key + '">' + Type_DsimDnao.getEnumList()[key] + '</option>';
  }
  html += '</select>';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + language.get('entry_dimension') + '<span class="required">*</span></span>';
  html += '<div class="field-entry-group">';
  html += '<input class="field-entry mask-number" type="text" name="listaescolar_module[' + id + '][width]" value="" size="3" >';
  html += '<input class="field-entry mask-number" type="text" name="listaescolar_module[' + id + '][height]" value="" size="3">';
  html += '</div>';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + language.get('entry_school') + '</span>';
  html +=
    '<input type="hidden" name="listaescolar_module[' + id + '][layout_id]" value="' + info.layout.layout_id + '"></input>';
  html += '<select class="field-entry" name="listaescolar_module[' + id + '][school_id]">';
  for (let i = 0; i < info.escolas.length; i++) {
    html += '<option value="' + info.escolas[i].school_id + '">' + info.escolas[i].descricao + '</option>';
  }
  html += '</select>';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-md">';
  html += '<label class="field field-medium">';
  html += '<span class="field-label">' + language.get('entry_position') + '</span>';
  html += '<select class="field-entry" name="listaescolar_module[' + id + '][position]">';
  for (var key in Type_ModulePosition.getRemoveArray(
    [Type_ModulePosition.Tp_ColumnRight, Type_ModulePosition.Tp_ColumnLeft, Type_ModulePosition.Tp_AppMobile],
    true
  )) {
    html +=
      '<option value="' +
      key +
      '">' +
      Type_ModulePosition.getRemoveArray([Type_ModulePosition.Tp_ColumnRight], true)[key] +
      '</option>';
  }
  html += '</select>';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-md-width-auto">';
  html += '<label class="field field-medium" style="width:126px;">';
  html += '<span class="field-label">' + language.get('entry_status') + '</span>';
  html += '<select class="field-entry" name="listaescolar_module[' + id + '][status]">';
  for (var key in TypeProduct_Status.getEnumList()) {
    html += '<option value="' + key + '">' + TypeProduct_Status.getEnumList()[key] + '</option>';
  }
  html += '</select>';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-md-width-auto">';
  html += '<label class="field field-medium" style="width:64px;">';
  html += '<span class="field-label">' + language.get('entry_sort_order') + '</span>';
  html +=
    '<input class="field-entry mask-number" type="text" name="listaescolar_module[' + id + '][sort_order]" value="' + id + '" size="3">';
  html += '</label>';
  html += '</div>';
  html += '<div class="col-xs-12 col-md-width-auto">';
  html += '<div class="padding-medium cursor-pointer top-margin-medium js-remove-banner"';
  html += 'data-tooltip="' + language.get('button_remove') + '"';
  html += 'data-banner-id="' + id + '"';
  html += '>';
  html += '<i class="fas fa-trash text-gray"></i>';
  html += '</div>';
  html += '</div>';
  html += '</div>';
  html += '</div>';

  containerBannerList.insertAdjacentHTML('afterbegin', html);

  initRemoveBanner(document.getElementById(id));
}
