Tags de tema (Colapsable)

$(function() {
  // Tus tags predefinidos, cada tag va entre corchetes y debe tener los valores declarados en el ejemplo
  var threadTags = [
    {
      filter: 'privado', // Valor que buscará, ponlo siempre todo en minúsculas, obligatorio
      color: '#3774ad', // Color de acento, obligatorio
      icon: '<em class="fas fa-times"></em>' // Icono, si no necesitas, déjalo como en el ejemplo de 'libre'
    },
    {
      filter: '+18',
      color: '#ad3737',
      icon: '<em class="fas fa-exclamation-triangle"></em>'
    },
    {
      filter: 'libre',
      color: '#37ad3f',
      icon:''
    }
  ];
  var threadTagClass = 'threadtag'; // Título de la clase de tus tags
  var threadTagElement = 'span'; // Elemento que serán tus tags (div, span, i, etc)
  var undeclaredTagColor = '#655670'; // Color de acento para los tags no predefinidos
  var lastPostLink = '.forums .row .lastpost>span>a:first-child'; // Link del último tema en el listado de foros

  // NO EDITES A PARTIR DE AQUÍ
  // EN SERIO, SI EDITAS Y LO ROMPES ES COSA TUYA

  $('.module-title, .post-title, .title-thread, a.topictitle').each(function() {
    var tagsFound = []; // Array para guardar etiquetas encontradas
    var $element = $(this); // Guardar elemento seleccionado

    var titleOnly = '';
    var string = $element.text();
    if (/\{.*?\}/.test(string)) {
      titleOnly = string.replace(/\{.*?\}/g, "").trim();
    } else {
      titleOnly = string.trim();
    }
    var tags = string.toLowerCase().match(/[^{]+(?=\})/g);

    if (tags) {
      $.each(tags, function(index, tag) {
        var foundTag = false; // Valor para checar si el tag ha sido encontrado en threadTags
        $.each(threadTags, function(index, threadTag) {
          if (tag === threadTag.filter) {
            // El valor de la etiqueta coincide con un filtro de threadTags
            tagsFound.push('<'+threadTagElement+' class="'+threadTagClass+'" data-filter="' + threadTag.filter + '" style="--accent:' + threadTag.color + '">' + threadTag.icon + '' + threadTag.filter + '</'+threadTagElement+'>'); // Añade el tag encontrado al array
            foundTag = true;
          }
        });

        if (!foundTag) {
          tagsFound.push('<'+threadTagElement+' class="'+threadTagClass+'" data-filter="' + tag + '" style="--accent:' + undeclaredTagColor + '">' + tag + '</'+threadTagElement+'>'); // Añade el tag no predefinido al array
        }
      });
    }

    var tagsString = tagsFound.join(''); // Formar string con los tags encontrados
    if (tagsString.length > 0) {
      var titleAndTags = tagsString + titleOnly;
      $element.html(titleAndTags);
    }
    if ($element.hasClass('title-thread')) {
      $('title').text(titleOnly); // Cambiar valor de title si se está previsualizando un tema con tags
    }
  });

  // Limpiar links en últimos posts de foros
  $(lastPostLink).each(function() {
    var $element = $(this);
    var string = $element.attr('title');
    if (/\{.*?\}/.test(string)) {
      string = string.replace(/\{.*?\}/g, "").trim();
      $element.text(string).attr('title',string);
    }
  });

  // Insertar formulario en creación de temas
  $('form[action="/post"]').find('.threadSubject').each(function() {
    var $threadSubject = $(this);
    var subjectText = $threadSubject.text().trim();
    if (subjectText.indexOf('tema') !== -1) {
      var formHTML = '<details id="tagsBox"><summary>Tags de tema</summary><form id="tagForm"><div>'; // Insertar formulario
      $.each(threadTags, function(index, threadTag) {
        var idTag = threadTag.filter.replace(/\s/g, '');
        var checkboxHTML = '<input type="checkbox" name="tags" id="tag-'+idTag+'" value="' + threadTag.filter + '"><label for="tag-'+idTag+'"><'+threadTagElement+' class="'+threadTagClass+'" data-filter="' + threadTag.filter + '" style="--accent:' + threadTag.color + '">' + threadTag.icon + '' + threadTag.filter + '</'+threadTagElement+'></label>';
        formHTML += checkboxHTML; // Añadir tags al HTML del formulario
      });
      formHTML += '</div><br/><button id="addTagsBtn">Modificar título de tema</button></form></details>'; // Insertar botón al formulario

      $threadSubject.parents('fieldset').before(formHTML); // Colocar el formulario sobre la edición de título de tema

      // Marcar como checks los inputs presentes en el título al cargar la página
      var threadSubjectInput = $threadSubject.parents('dl').find('dd input[name="subject"]');
      var inputValue = threadSubjectInput.val();

      threadTags.forEach(function(tag) {
        if (inputValue.toLowerCase().includes(tag.filter.toLowerCase())) {
          $('#tagForm').find('input[name="tags"][value="' + tag.filter + '"]').prop('checked', true);
        }
      });
    }
  });

  // Botón de añadir tags
  $('#addTagsBtn').click(function() {
    var selectedTags = $(this).prev().prev().find('input[name="tags"]:checked')
      .map(function() {
        return '{' + $(this).val() + '}';
      })
      .get();

    var threadSubjectInput = $(this).parents('form').next('fieldset').find('.threadSubject').parents('dl').find('dd input[name="subject"]');
    var inputValue = threadSubjectInput.val();
    var existingTags = inputValue.match(/\{.*?\}/g) || [];

    // Quitar los tags deseleccionados
    var deselectedTags = existingTags.filter(function(tag) {
      var tagFilter = tag.substring(1, tag.length - 1).toLowerCase();
      return !selectedTags.includes(tag) && threadTags.some(function(threadTag) {
        return threadTag.filter.toLowerCase() === tagFilter;
      });
    });
    deselectedTags = deselectedTags.filter(function(tag, index) {
      return deselectedTags.indexOf(tag) === index;
    });
    var updatedTags = existingTags.filter(function(tag) {
      return !deselectedTags.includes(tag);
    });

    // Añadir tags seleccionados no presentes
    selectedTags.forEach(function(tag) {
      if (!updatedTags.includes(tag)) {
        updatedTags.push(tag);
      }
    });

    // Actualizar título
    var updatedSubject = updatedTags.join('') + ' ' + inputValue.replace(/\{.*?\}/g, '').trim();
    threadSubjectInput.val(updatedSubject.trim());
    return false;
  });
});