let lastIdSender = 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 messageSender(messageData, childType = 'append', returnTemplate = false, container = '.body-message', usaAppend = false, hiddenMenuMsg = false) {
  let div = "";
  let existsReaction = false;

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

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

  if ((messageData.printPicture && childType === 'prepend' && ((lastIdSender > 0 && messageData.sender.id > 0) && (lastIdSender == messageData.sender.id)))) {
    let lastUserPick = $(`${container} .message-data .user-pick`).eq(0);
    let containerPick = $(lastUserPick).parent().parent();
    $(containerPick).find('.user-pick-sender').remove();
    $(containerPick).find('.div-user-pick').remove();
    $(containerPick).find('.user-name-sender').remove();
  }

  // FOTO E NOME DO USUÁRIO //
  if ((messageData.printPicture && childType === 'prepend') || (!$(`${container} .message-data:last`).hasClass('message-sender-content') && childType === 'append' && !returnTemplate) || (document.querySelector(`#message-${messageData.messageId} .user-pick`) && childType === 'append')) {
    if (messageData.chatType !== 'user') {
      div += `<div class="d-flex justify-content-end align-items-end user-name user-name-sender user-name-recipient">
        <span class="message-sender-span ${(messageData.chatType == 'service' && SESSION_DATA.id_tipo_colaborador < USUARIO_CLIENTE) ? 'white' : ''}">${messageData.sender.name}</span>
      </div>`;
    }

    lastIdSender = messageData.sender.id;
  }

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

  // CONTEÚDO DA MENSAGEM
  div += `<div class="message-sender-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">
        <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] != "") {
      if (filesListReply.length > 1) {
        div +=
          `<div class="message-div-image data-reply-to-">
          <i class="ri-file-copy-fill"></i>Múltiplos Arquivos
        </div>`;
      }
      else {
        const file = filesListReply[0];

        const fileUrlReply = (`${FILE_URL}/${file}`).replaceAll(" ", "");
        const fileExtensionReply = getFileExtension(fileUrlReply);
        const fileNameReply = fileUrlReply.split('ArqEscritorio/');
        fileNameReply.push(messageData.dataReply.nome_arquivo);

        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>`;
        // 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', 'webm'].includes(fileExtensionReply))
          div +=
            `<div class="message-div-image">
            <i class="ri-headphone-fill"></i> ${messageData.dataReply.message ? messageData.dataReply.message : 'Mensagem de Voz'}
          </div>`;
        else if (['mp4'].includes(fileExtensionReply))
          div +=
            `<div class="message-div-image">
          <i class="ri-video-on-fill"></i> ${messageData.dataReply.message ? messageData.dataReply.message : 'Vídeo'}
        </div>`;
        // doc
        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[0]}</span>
              </a>
            </div>`;
        }

      }
    } else {
      div += `<a>${messageData.dataReply.message}</a>`;
    }

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

  if (!messageData.user_exclusao > 0) {
    // VERIFICA SE FOI ENVIADO ALGUM ARQUIVO
    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);
        const fileName = fileUrl.split('ArqEscritorio/');
        fileName.push(messageData.nome_arquivo);

        // image
        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="msg-file">
              <a class="chatEmoticon cursor-pointer docDownload d-flex align-items-center gap-1" onclick="FileModal('${fileUrl}', '${nameFile}.${fileExtension}')">
                <i class="ri-arrow-down-circle-line"></i>
                <span >${nameFile}.${fileExtension}</span>
              </a>
            </div>`;
        }
      })
    }
  }

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

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

  // MENSAGEM VISUALIZADA
  if (messageData.chatType == 'service') {
    const idViewed = (messageData.clientServiceId == messageData.sender.id) ? messageData.attendantServiceId : messageData.clientServiceId;

    if (messageData.viewed && messageData.viewed.includes(idViewed))
      div += `<i class="ri-check-double-line messageSign messageViewed"></i>`;
    else
      div += `<i class="ri-check-double-line messageSign"></i>`;
  } else {
    if (messageData.viewed && messageData.viewed.includes(messageData.receiver.id))
      div += `<i class="ri-check-double-line messageSign messageViewed"></i>`;
    else
      div += `<i class="ri-check-double-line messageSign"></i>`;
  }

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

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

  if (!messageData.user_exclusao > 0) {
    let objResponse = {
      messageId: messageData.messageId,
      senderId: messageData.sender.id,
      senderName: messageData.sender.name,
      receiverId: messageData.receiver.id,
      receiverName: messageData.receiver.name,
      classIndex: 'message-sender-message',
      departamentId: null,
      tipo: 'Sender'
    }

    if (!hiddenMenuMsg) {
      // AÇÕES DA MENSAGEM
      if (messageData.chatType != 'service') {
        div += `<div class='acoes-msg acoes-sender-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 -------------- //

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

  } else {
    div += `<span class="font-italic text-white"><i class="ri-forbid-line"></i> Mensagem apagada</span>`;
  }

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

  if ((messageData.printPicture && childType === 'prepend') || (!$(`${container} .message-data:last`).hasClass('message-sender-content') && childType === 'append' && !returnTemplate) || (document.querySelector(`#message-${messageData.messageId} .user-pick`) && childType === 'append')) {
    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 user-pick-sender" src="${srcFotoUser}">
      </div>`;
    }

    lastIdReceiver = messageData.sender.id;
  } else if (messageData.chatType !== 'user') {
    div += `<div class="user-pick-container" style="opacity:0; pointer-events:none"></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') {
    if (usaAppend) {
      $(`${container}`).append(div);
    } else {
      $(`${container}`).prepend(div);
    }
  } else {
    $('#container-reply').remove();
    $(`${container}`).append(div);
    defaultScroll();
  }

  // reloadAudioPlayers();
  registrarEventoEnded();
  checarPosicaoChat();
}