let lastIdReceiver = null;

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

  //  INICIO DA DIV DA MENSAGEM //
  if (!returnTemplate) div += `<div style="display:flex" id="message-${messageData.messageId}" class="message-recipient-content messages message-data" data-id="${messageData.date}">`

  if ((messageData.printPicture && childType === 'prepend' && ((lastIdReceiver != 0 && messageData.sender.id != 0) && (lastIdReceiver == 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();
    $(containerPick).find('.user-name-recipient').remove();

  }


  // FOTO E NOME DO USUÁRIO //
  if ((messageData.printPicture && childType === 'prepend') || (!$('.body-message .message-data:last').hasClass('message-recipient-content') && childType === 'append' && !returnTemplate) || (document.querySelector(`#message-${messageData.messageId} .user-pick`) && childType === 'append')) {
    div += `  <div class="user-pick-container">`
    div += `    <img class="user-pick" src="${messageData.sender.picture ? messageData.sender.picture : DEFAULT_PICTURE}">`;
    div += `  </div>`;

    div += `    <div id="abrigaReacoes">`;

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

    lastIdReceiver = messageData.sender.id;

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

  
  let idMsg = 0;
  if (messageData.dataReply) idMsg = messageData.dataReply.messageId;

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

  if (idMsg > 0 && !messageData.user_exclusao > 0) {
    let funcOpenMessage = '';
    const senderReplyId = messageData.dataReply.id_remetente;
    const senderReplyName = messageData.dataReply.name_remetente;
    const ReceiverReplyId = messageData.dataReply.id_destinatario;
    const depReplyId = messageData.dataReply.id_departamento;


    if (messageData.dataReply.id_departamento > 0) {
      funcOpenMessage = `openMessage(${idMsg}, ${senderReplyId}, null, ${depReplyId})`;
    } else {
      funcOpenMessage = `openMessage(${idMsg}, ${senderReplyId}, ${ReceiverReplyId}, null)`;
    }

    let color = '';
    if(messageData.dataReply.id_remetente == messageData.sender.id) color = '#1DC370'; else color = '#409fd5';
    

    div += `<div id="msg-${messageData.messageId}-reply-${idMsg}" data-idreply="${idMsg}" style="border-left: solid 5px ${color};" class="rounded p-2 d-flex justify-content-between align-middle mb-2 bg-white message-reply">`;
    div += `  <div onclick="${funcOpenMessage}" style="font-size: 0.8rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; max-width:47vw; min-width:80px; cursor: pointer">`;
    div += `    <h6 style="color: #1DC370; font-size: 0.9rem;" class="mb-0">${senderReplyName}</h6>`;

    const existsFilesReply = messageData.dataReply.caminho_arquivo.replace("{", "").replace("}", "").split(",");
    const namesFilesReply = ((messageData.dataReply.nome_arquivo) ? messageData.dataReply.nome_arquivo.split(",") : '');
    if (existsFilesReply[0] != "") {
      existsFilesReply.forEach((file, key) => {
      
        const fileUrlReply = (`${FILE_URL}/${file}`).replaceAll(" ", "");
        const fileExtensionReply = getFileExtension(fileUrlReply);
        const fileNameReply = fileUrlReply.split('ArqEscritorio/');
        fileNameReply.push(messageData.dataReply.nome_arquivo);

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

        // doc
        else {
          div += "<div style='background:#b0cfab; border:1px solid #a5c3a0; border-radius:10px; padding: 5px 10px; margin-bottom:5px;max-width: 350px;'>";
          div += `  <a class="chatEmoticon cursor-pointer docDownload d-flex align-items-center gap-1" onclick="">`;
          div += `   <i style="font-size:3rem; color:#5a6b56" class="ri-arrow-down-circle-line"></i>`;
          div += `   <span style="font-size:0.8rem; color:#5a6b56; font-weight:600; margin:0px 0px; word-break: break-all;">${namesFilesReply[key]}</span>`;
          div += `  </a>`;
          div += "</div>";
        }
      })
    } else {
      div += `    <a style="text-decoration: none; color: inherit;" class="text-secondary">${messageData.dataReply.message}</a>`;
    }

    div += '  </div>';
    div += '</div>';
  }


  if (!messageData.user_exclusao > 0) {
    // 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 = getFileExtension(fileUrl);
        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 class='message-archive' style='background: #e1e1e1 ; border:1px solid #cdcdcd; border-radius:10px; padding: 0px 10px; margin-top:3px; margin-bottom:10px; max-width: 350px;'>";
          div += `  <a class="chatEmoticon cursor-pointer docDownload d-flex align-items-center gap-1" onclick="FileModal('${fileUrl}')">`;
          div += `   <i style="font-size:3rem; color:#868c8f" class="ri-arrow-down-circle-line"></i>`;
          div += `   <span style="font-size:0.8rem; color:#525659; font-weight:600; margin:0px 0px;word-break: break-all;">${namesFiles[key]}</span>`;
          div += `  </a>`;
          div += "</div>";
        }
      })
    }

    // VERIFICA SE HÁ MENSAGEM
    div += `      <span class="message-text">${identificaLink(messageData.message)}</span>`;
  } else {
    div += `    <span class="font-italic text-secondary"><i class="ri-forbid-line"></i> Mensagem apagada</span>`
  }




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


  if (!messageData.user_exclusao > 0) {
    // 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> `;

    // AÇÕES DA MENSAGEM
    div += "<div class='reacoes-msg'>";

    let objResponse = {
      messageId: messageData.messageId,
      senderId: messageData.sender.id,
      senderName: messageData.sender.name,
      receiverId: messageData.receiver.id,
      receiverName: messageData.receiver.name,
      classIndex: 'message-recipient-message',
      departamentId: null
    }

    let jsonResponse = JSON.stringify(objResponse);

    // 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 font-weight-normal" onclick="openMessageResponse('${encodeURIComponent(jsonResponse)}')"> <i class="ri-arrow-go-back-line text-secondary"></i> <span>Responder</span></div>`;
    // div += `      <div class="actionResMensagem font-weight-normal" onclick="shareMessage(${messageData.messageId})"> <i class="ri-arrow-go-forward-fill text-secondary"></i> <span>Encaminhar</span></div>`;
    div += `      <div class="actionFavMensagem font-weight-normal" onclick="marcarComoNaoLido(${messageData.messageId})"> <i class="ri-chat-new-fill text-secondary"></i> <span>Marcar como não lido</span></div>`;
    // div += `      <div class="actionFavMensagem font-weight-normal mb-2" 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 && !messageData.user_exclusao > 0) div += '<p style="margin-bottom:16px"></p>';

  // VERIFICA SE É PARA RETORNAR O TEMPLATE
  if (returnTemplate) return div;


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

    if ($('.body-message #container-reply').length > 0) {
      $(div).insertBefore('.body-message #container-reply');
      defaultScroll();
    } else {
      $('.body-message').append(div);
    }

  }
  checarPosicaoChat();
}