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

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

  let moduleId = 0;

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

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

  removeModule();

  const MODULES = info.modules;

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

  function addModule(module = {}) {
    const { position, layout_id, status, sort_order } = module;
    const MODULE_CONTAINER = document.createElement('div');
    const POSITIONS = window.Type_ModulePosition.getEnumList();
    const LAYOUTS = info.layouts;
    const STATUS = window.Type_Status.getEnumList();
    const 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 layout-select" name="futurafiltromarca_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="futurafiltromarca_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="futurafiltromarca_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-number2" type="text" name="futurafiltromarca_module[${moduleId}][sort_order]"
          value="${typeof sort_order !== 'undefined' ? sort_order : ''}" size="1">
        </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="${window.language.get(
          'button_remove'
        )}" data-manufactured-id="{{ key }}">
          <i class="fas fa-trash text-gray"></i>
        </div>
      </div>
    </div>`;

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

    removeModule(MODULE_CONTAINER);

    moduleId++;
    
    const layoutSelects = document.querySelectorAll('.layout-select');
    layoutSelects.forEach(select => {
      select.setAttribute('data-original-value', select.value);
      select.addEventListener('change', function() {
        checkDuplicateFields(); 
      });
    });

    function checkDuplicateFields() {
      const selectedLayoutSelects = document.querySelectorAll('.layout-select');
      let duplicateValues = [];
      selectedLayoutSelects.forEach(select => {
        const selectedValue = select.value;
        selectedLayoutSelects.forEach(otherSelect => {
          if (select !== otherSelect && otherSelect.value === selectedValue && !duplicateValues.includes(selectedValue)) {
            duplicateValues.push(selectedValue);
          }
        });
      });
      selectedLayoutSelects.forEach(select => {
        if (duplicateValues.includes(select.value)) {
          select.style.border = '1px solid #8A0F1A';
          const errorSpan = select.nextElementSibling;
          if (!errorSpan || !errorSpan.classList.contains('error-message')) {
            const errorSpan = document.createElement('span');
            errorSpan.classList.add('error-message');
            errorSpan.style.color = '#8A0F1A';
            errorSpan.style.fontSize = '14px';
            errorSpan.innerHTML = 'Os campos não podem <br>ser iguais';
            select.parentNode.insertBefore(errorSpan, select.nextElementSibling);
          }
        } else {
          select.style.border = '';
          const errorSpan = select.nextElementSibling;
          if (errorSpan && errorSpan.classList.contains('error-message')) {
            errorSpan.remove();
          }
        }
      });
    }
    
    checkDuplicateFields(); 
  }
});

