let lastIdNeutral = null;

function messageNeutral(messageData, childType = "append", returnTemplate = false) {
  let div = "";
  let messageUser = "";
  let existsReaction = false;

  if (SESSION_DATA.id == messageData.sender.id) messageUser = 'my-message-neutral';

  //  INICIO DA DIV DA MENSAGEM //
  if (!returnTemplate) div += `<div id="message-${messageData.messageId}" class="message-neutral-content message-data ${messageUser}" data-id="${messageData.date}" >`;


  let ReceivePictureVerify = (((!$('.body-message .message-data:last').hasClass('my-message-neutral') && childType === 'append' && SESSION_DATA.id == messageData.sender.id)
    ||
    $('.body-message .message-data:last').hasClass('my-message-neutral') && childType === 'append' && SESSION_DATA.id != messageData.sender.id) && !returnTemplate);


  /*
    Este if, verifica se quando carrega novas mensagens na rolagem, se a última mensagem carregada já não está com a foto e o
    nome do usuário incluídos, se tiver e a primeira mensagem carregada também for do mesmo usuário, remove a foto que já havia
    sido carregada e mantem somente a última para que não fiquei mais de uma foto e nome para mensagens seguidas do mesmo usuário.
  */
  if ((messageData.printPicture && childType === 'prepend' && ((lastIdNeutral != 0 && messageData.sender.id != 0) && (lastIdNeutral == messageData.sender.id)))) {
    let lastUserPick = $('.body-message .message-data .user-pick').eq(0);

    let containerPick = $(lastUserPick).parent().parent();

    $(containerPick).find('.user-pick').remove();
    $(containerPick).find('.div-user-pick').remove();

  }
  //--------------------------------------------------------------------------------------------------------------------------------

  // FOTO E NOME DO USUÁRIO //
  if (messageData.printPicture && childType === 'prepend' || ReceivePictureVerify || (document.querySelector(`#message-${messageData.messageId} .user-pick`) && childType === 'append')) {
    div += `  <div style="margin-top:10px !important" class="user-pick-container">`
    div += `    <img class="user-pick" src="${messageData.sender.picture ? messageData.sender.picture : DEFAULT_PICTURE}">`;
    div += `  </div>`;

    div += `    <div style="margin-top:10px !important; width: 100%;">`;

    div += `      <div style="margin-bottom:5px;" class="div-user-pick">`;
    div += `        <span style="font-weight:bold; color:#5a5d64" class="text-capitalize">${messageData.sender.name}</span>`;
    div += `      </div>`;

    lastIdNeutral = messageData.sender.id;

  } else div += `  <div class="user-pick-container" style="opacity:0; pointer-events:none"></div>`;


  // CONTEÚDO DA MENSAGEM
  div += `    <div class="message-neutral-message">`;

  // VERIFICA SE FOI ENVIADO ALGUM ARQUIVO
  const existsFiles = messageData.files.replace("{", "").replace("}", "").split(",");
  const namesFiles = ((messageData.nome_arquivo) ? messageData.nome_arquivo.split(",") : '');

  if (existsFiles[0] != "") {
    existsFiles.forEach((file, key) => {
      const fileUrl = (`${FILE_URL}/${file}`).replaceAll(" ", "");
      const fileExtension = fileUrl.slice(-3);
      const fileName = fileUrl.split('ArqEscritorio/');
      fileName.push(messageData.nome_arquivo);

      // image
      if (['png', 'jpg', 'gif', 'jpeg'].includes(fileExtension))
        div += `<div class="message-div-image"><img onclick="FileModal('${fileUrl}')" src="${fileUrl}" width="250" class="d-block cursor-pointer mb-2 message-image"" /></div>`;
      else if (['mp3'].includes(fileExtension))
        div += `<audio controls><source src="${fileUrl}" type="audio/mpeg"></audio>`;
      else if (['mp4'].includes(fileExtension))
        div += ` <video width="320" height="240" controls> <source src="${fileUrl}" type="video/mp4"></video>`;

      // doc
      else {
        div += "<div style='margin-bottom:10px;margin-top: 10px;'>";
        div += `  <a class="chatEmoticon cursor-pointer docDownload" onclick="FileModal('${fileUrl}')">`;
        div += `    ${iconeFileChat(fileExtension)}`;
        div += `    <span class='text-success'>${namesFiles[key]}</span>`;
        div += `  </a>`;
        div += "</div>";
      }
    })
  }

  // VERIFICA SE HÁ MENSAGEM
  div += `      <span class="message-text">${identificaLink(messageData.message)}</span>`;

  // HORA DA MENSAGEM
  div += `      <span class="hourMessage hourMessage-${messageData.messageId}">${messageData.hour}</span>`

  // FAVORITO
  // if (messageData.favorite && messageData.favorite.includes(SESSION_DATA.id)) div += ` <div class="favoritaMensagem-${messageData.messageId} mensagemFavoritada" data-bs-toggle="tooltip" data-bs-placement="top"> <i class="ri-heart-2-fill text-danger"></i> </div> `;


  if (messageData.chatType != 'bot') {
    // AÇÕES DA MENSAGEM
    div += "<div class='reacoes-msg'>";

    // REAÇÕES
    div += ' <div id="reagirChat" data-bs-toggle="tooltip" data-bs-placement="top" style="position:relative; margin-left:-5px"> ';
    div += '   <i class="ri-more-2-fill"></i>';
    div += '   <div style="display:none; position:absolute; left:10px; background:none">';
    div += '     <div class="containerReacoes">'
    // div += `      <div class="actionResMensagem" onclick="answerMessage(${messageData.messageId}"> <i class="ri-chat-new-fill text-primary"></i> <span>Responder</span></div>`;
    // div += `      <div class="actionFavMensagem" onclick="favoritaMensagem(${messageData.messageId}, ${SESSION_DATA.id})"> <i class="ri-heart-add-fill text-secondary"></i> <span>Favoritar Mensagem</span></div>`;
    div += '      <div style="display:flex; align-items:center; justify-content:start; gap:3px">';
    div += `        <span class="emotionReacao" style="font-size:1rem;" onclick="insereMensagemReacao('&#128077;', ${messageData.messageId})">&#128077;</span>`;
    div += `        <span class="emotionReacao" style="font-size:1rem;" onclick="insereMensagemReacao('&#128078;', ${messageData.messageId})">&#128078;</span>`;
    div += `        <span class="emotionReacao" style="font-size:1rem;" onclick="insereMensagemReacao('&#128514;', ${messageData.messageId})">&#128514;</span>`;
    div += `        <span class="emotionReacao" style="font-size:1rem;" onclick="insereMensagemReacao('&#128525;', ${messageData.messageId})">&#128525;</span>`;
    div += `        <span class="emotionReacao" style="font-size:1rem;" onclick="insereMensagemReacao('&#128549;', ${messageData.messageId})">&#128549;</span>`;
    div += `        <span class="emotionReacao" style="font-size:1rem;" onclick="insereMensagemReacao('&#127919;', ${messageData.messageId})">&#127919;</span>`;
    div += `        <span class="emotionReacao" style="font-size:1rem;" onclick="insereMensagemReacao('&#127383;', ${messageData.messageId})">&#127383;</span>`;
    div += '      </div>';
    div += '     </div>';
    div += '    </div>';
    div += ' </div>'
    div += "  </div>";

    // --------------- RESULTADO REAÇÕES --------------------- //


    const reactions = ['&#128077;', '&#128078;', '&#128514;', '&#128525;', '&#128549;', '&#127919;', '&#127383;'];
    div += `<div id="divResultadoReacoes">`;

    reactions.forEach(reaction => {
      if (messageData.reactions && messageData.reactions[reaction].amount > 0) {

        const names = messageData.reactions[reaction].names.split(',');
        existsReaction = true;

        div += `<div id="div-reacoes">`;
        div += `  <span class="qtdReacoes">${messageData.reactions[reaction].amount > 1 ? messageData.reactions[reaction].amount : ''} ${reaction}</span>`;
        div += `  <div class="div-reacoes-nome">`;

        names.forEach(name => div += `<span class="reacoes-nome">${name}</span>`);

        div += `  </div>`;
        div += `</div>`;
      }
    });

    div += `</div>`;

    // --------------- FIM RESULTADO REAÇÕES -------------- //

    div += `  </div>`;


  }
  div += `  </div>`;
  div += `  </div>`;
  div += ` </div>`
  if (!returnTemplate) div += `</div>`

  // PULA UMA LINHA QUANDO EXISTE REAÇÃO
  if (existsReaction) div += '<p style="margin-bottom:16px"></p>';

  // VERIFICA QUAL TIPO DE APPEND É
  if (returnTemplate) return div;

  if (childType === 'prepend') {
    $('.body-message').prepend(div);
  } else {
    $('.body-message').append(div);
    defaultScroll();
  }

  checarPosicaoChat();

}