let lastIdReceiver = null;

// o usaAppend foi add para quando a msg precisa ser tratada como prepend mas inserida como append
// o hiddenMenuMsg foi criado para ocultar o menu de reações e ações das msg na modal de pesquisa de mensagem.
function messageReceiver(messageData, childType = "append", returnTemplate = false, container = '.body-message', usaAppend = false, hiddenMenuMsg = false) {
  let div = "";
  let existsReaction = false;

  // if ($(`#message-${messageData.messageId}`).length > 0) return;

  if (messageData.internalComment == 1 && SESSION_DATA.id_tipo_colaborador >= USUARIO_CLIENTE) return;

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

  if ((messageData.printPicture && childType === 'prepend' &&
    ((lastIdReceiver != 0 && messageData.sender.id != 0) &&
      (lastIdReceiver == messageData.sender.id)))) {
    let lastUserPick = $(`${container} .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 //
  // prepend é para montar as msg antigas
  // append é para msg novas recebidas
  if ((messageData.printPicture && childType === 'prepend') ||
    (!$(`${container} .message-data:last`).hasClass('message-recipient-content') && childType === 'append' && !returnTemplate) ||
    ($(`#message-${messageData.messageId} .user-pick`).length && childType === 'append') ||
    (childType === 'append' && $(`${container} .message-data:last`).length && $(`${container} .message-data:last`).data('user_id') != messageData.sender.id && !returnTemplate)
  ) {
    // Só adiciona a foto de perfil se o chat for de usuários
    if (messageData.chatType !== 'user') {
      const srcFotoUser = (messageData.chatType == 'service' && messageData.sender.id != -1) ? DEFAULT_PICTURE : (messageData.sender.picture ? messageData.sender.picture : DEFAULT_PICTURE);

      div += `<div class="user-pick-container">
        <img class="user-pick" src="${srcFotoUser}">
      </div>`;
    }

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

    // Só adiciona o nome se o chat for de usuários
    if (messageData.chatType !== 'user') {
      div += `<div class="user-name-recipient">
        <span class="text-capitalize ${(messageData.chatType == 'service' && SESSION_DATA.id_tipo_colaborador < USUARIO_CLIENTE) ? 'white' : ''}">${messageData.sender.name}</span>
      </div>
    `;
    }

    lastIdReceiver = messageData.sender.id;
  } else if (messageData.chatType !== 'user') {
    div += `<div class="user-pick-container opacity-0 pe-none"></div>`;
  }

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

  // CONTEÚDO DA MENSAGEM
  div += `<div class="message-recipient-message" ${(messageData.internalComment == 1) ? 'style="color: #000 !important; background-color: #fff2b9  !important; border: 2px solid #fff2b9 ;"' : ''}>`;

  if (messageData.shareId !== null && messageData.shareId !== undefined) div += `<div class="shareMessageInfo"><i class="ri-share-forward-fill"></i> Encaminhada</div>`;

  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)`;
    }

    div += `
      <div id="msg-${messageData.messageId}-reply-${idMsg}" data-idreply="${idMsg}" class="message-reply message-reply-reciever">
        <div onclick="${funcOpenMessage}" class="message-redirect">
          <h6 class="mb-0">${senderReplyName}</h6>
    `;

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

        if (['png', 'jpg', 'gif', 'jpeg', 'webp'].includes(fileExtensionReply)) {
          div += `<div class="message-div-image">
            <i class="ri-image-fill"></i>${messageData.dataReply.message ? messageData.dataReply.message : 'Foto'}
          </div>`;
        } else if (['mp3', 'webm'].includes(fileExtensionReply)) {
          let type = fileExtensionReply === 'mp3' ? 'audio/mpeg' : 'audio/webm';

          // div +=
          //   `<div class="audio-player">
          //   <button class="playPauseBtn btn-player pe-none">s
          //     <div class="loading-rotation loading-animation" style="font-size: 1rem !important;height: 0px;display: flex;align-items: center;justify-content: center;width: 0px;">
          //       <i class="ri-loader-4-line"></i>
          //     </div>
          //   </button>
          //   <div class="waveform-container">
          //     <canvas class="waveform" width="250" height="50"></canvas>
          //     <div class="time-display">00:00 / 00:00</div>
          //     <button class="speed-btn">1x</button>
          //   </div>
          //   <audio class="audio" src="${fileUrlReply}" type="${type}"></audio>
          // </div>`;
          div += `<div class="audio-player">
            <audio controls class="audio" src="${fileUrlReply}" type="${type}"></audio>
          </div>`;
        } else if (['mp4'].includes(fileExtensionReply)) {
          div += `<video class="videoControl" width="320" controls><source src="${fileUrlReply}" type="video/mp4"></video>`;
        } else {
          div += `
            <div class="msg-file">
              <a class="chatEmoticon cursor-pointer docDownload d-flex align-items-center gap-1" onclick="">
                <i class="ri-arrow-down-circle-line"></i>
                <span>${namesFilesReply[key]}</span>
              </a>
            </div>
          `;
        }
      });
    } else {
      div += `<a>${messageData.dataReply.message}</a>`;
    }

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

  if (!messageData.user_exclusao > 0) {
    const filesList = messageData.files.replace("{", "").replace("}", "").split(",");
    const thumbsList = messageData.thumb
      ? messageData.thumb.replace("{", "").replace("}", "").split(",")
      : Array(filesList.length).fill(0);
    const namesFiles = messageData.nome_arquivo ? messageData.nome_arquivo.split(",") : '';
    if (filesList[0] != "") {
      filesList.forEach((file, key) => {
        const fileUrl = `${FILE_URL}/${file}`.replaceAll(" ", "");
        const fileExtension = getFileExtension(fileUrl);

        if (['png', 'jpg', 'gif', 'jpeg', 'webp'].includes(fileExtension)) {
          const thumbUrl = thumbsList[key] ? (`${FILE_URL}/${thumbsList[key]}`).replaceAll(" ", "") : null;
          const image_compressed = thumbUrl ? thumbUrl : fileUrl;

          var styleGifContainer = (fileExtension === 'gif') ? 'style="position: relative; display: inline-block;"' : '';

          div += `<a data-fancybox="galeria" href="${fileUrl}" class="message-div-image" data-caption="${namesFiles[key]}" ${styleGifContainer}>`;
          if (fileExtension === 'gif') {
            div += `  <div class="gif-overlay">gif</div>`;
            div += `  <img onmouseover="playGif(this)" src="${image_compressed}" data-type="static" data-static="${image_compressed}" data-gif="${fileUrl}" width="250" class="d-block cursor-pointer mb-2 message-image" />`;
          } else {
            div += `  <img src="${image_compressed}" width="250" class="d-block cursor-pointer mb-2 message-image" />`;
          }
          div += `</a>`;
        }
        else if (['mp3', 'webm'].includes(fileExtension)) {
          let type = fileExtension === 'mp3' ? 'audio/mpeg' : 'audio/webm';

          // div +=
          //   `<div class="audio-player">
          //   <button class="playPauseBtn btn-player pe-none">
          //     <div class="loading-rotation loading-animation" style="font-size: 1rem !important;height: 0px;display: flex;align-items: center;justify-content: center;width: 0px;">
          //       <i class="ri-loader-4-line"></i>
          //     </div>
          //   </button>
          //   <div class="waveform-container">
          //     <canvas class="waveform" width="250" height="50"></canvas>
          //     <div class="time-display">00:00 / 00:00</div>
          //     <button class="speed-btn">1x</button>
          //   </div>
          //   <audio class="audio" src="${fileUrl}" type="${type}"></audio>
          // </div>`;
          div += `<div class="audio-player">
            <audio controls class="audio" src="${fileUrl}" type="${type}"></audio>
          </div>`;
        } else if (['mp4'].includes(fileExtension)) {
          div += `<a data-fancybox="galeria" href="${fileUrl}" data-caption="${namesFiles[key]}">`;
          div += `  <video class="videoControl" width="320" controls><source src="${fileUrl}" type="video/mp4"></video>`;
          div += `</a>`;
        } else {
          const nameFile = namesFiles[key].replace(`.${fileExtension}`, '');

          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;'>
              <a class="chatEmoticon cursor-pointer docDownload d-flex align-items-center gap-1" onclick="FileModal('${fileUrl}', '${nameFile}.${fileExtension}')">
                <i style="font-size:3rem; color:#868c8f" class="ri-arrow-down-circle-line"></i>
                <span style="font-size:0.8rem; color:#525659; font-weight:600; margin:0px 0px;word-break: break-all;">${nameFile}.${fileExtension}</span>
              </a>
            </div>
          `;
        }
      });
    }

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

  div += `<span class="hourMessage hourMessage-${messageData.messageId}">`;

  // MENSAGEM EDITADA
  if (messageData.data_edicao) {
    div += `<a class="editTag pe-none">editado</a>`;
  }

  div += `${messageData.hour}</span>`;

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

    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,
      tipo: 'Receiver'
    }

    if (!hiddenMenuMsg) {
      // AÇÕES DA MENSAGEM
      if (messageData.chatType != 'service') {
        div += `<div class='acoes-msg'>`
        div += replyTemplate(messageData, objResponse);
        div += `</div>`;
      }

      // MENU DE REAÇÕES
      if (messageData.chatType != 'service') {
        div += `<div class='reacoes-msg'>`
        div += reactionsTemplate(messageData, objResponse);
        div += `</div>`;
      }
    }

    // --------------- RESULTADO REAÇÕES --------------------- //
    div += `<div id="divResultadoReacoes">`;
    if (messageData.reactions && typeof messageData.reactions === 'object') {
      Object.entries(messageData.reactions).forEach(([emoji, data]) => {
        var emojiCharacter = emoji;
        var quantityReaction = data.amount;
        var names = data.name;

        existsReaction = true;

        div += `
          <div id="div-reacoes">
            <span class="qtdReacoes">${quantityReaction > 1 ? quantityReaction : ''}<span class="fs-6">${emojiCharacter}</span></span>
          <div class="div-reacoes-nome">
        `;

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

        div += `</div></div>`;
      });
    }
    div += `</div>`;
    // --------------- FIM RESULTADO REAÇÕES -------------- //
  }

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

  if (existsReaction && !messageData.user_exclusao > 0) div += '<p style="margin-bottom:16px"></p>';

  if (returnTemplate) return div;

  if (childType === 'prepend') {
    if (usaAppend) {
      $(`${container}`).append(div);
    } else {
      $(`${container}`).prepend(div);
    }
  } else {
    if ($(`${container} #container-reply`).length > 0) {
      $(div).insertBefore(`${container} #container-reply`);
      cautiousScroll();
    } else {
      $(`${container}`).append(div);
      cautiousScroll();
    }
  }
  // reloadAudioPlayers()
  registrarEventoEnded();
  checarPosicaoChat();
}