$(document).ready(() => {
  // reagir
  // $('body').on('mouseover', '#reagirChat', () => $('#reagirChat > div').css({ 'display': 'flex' }));
  // $('body').on('mouseout', '#reagirChat', () => $('#reagirChat > div').css({ 'display': 'none' }));

  $('body').on('mouseover', '#reagirChat', function () {
    var $tooltip = $('#reagirChat > div');
    var messageOffset = $(this).offset();
    var messageHeight = $(this).outerHeight();
    var tooltipHeight = $tooltip.outerHeight();
    var inputContainerHeight = $('.footer-write').outerHeight();
    var windowHeight = $(window).height();

    var tooltipTop = messageOffset.top + messageHeight;

    // Verificar se é a última mensagem
    if (tooltipTop + tooltipHeight > windowHeight - inputContainerHeight) {
      tooltipTop = '-50';
    } else {
      tooltipTop = '-30';
    }

    // Definir a posição e exibir a div reações
    $tooltip.css({
      display: 'flex',
      top: tooltipTop + 'px',
      zIndex: 9999
    });
  });

  // Esconder o tooltip quando o mouse sair da mensagem
  $('body').on('mouseout', '#reagirChat', function () {
    $('#reagirChat > div').css('display', 'none');
  });

  window.addEventListener('resize', function () {
    checarPosicaoChat();
  });
})

//para checar se o elemento saiu dos limites da tela
function isHittingBoundaries(element, includeLeft = false) {
  const bodyRect = document.body.getBoundingClientRect();
  const messageRect = document.querySelector(".body-message").getBoundingClientRect();
  const innerRect = element.getBoundingClientRect();

  if ((innerRect.right + 253) > bodyRect.right) {
    if (((messageRect.width) - (innerRect.width + 30)) < 217 && includeLeft) {
      return 'left';
    }
    else {
      return 'right';
    }
  }
  else {
    return 'none';
  }
}

//para ajustar a posição do containerReacoes
function checarPosicaoChat() {
  const recipients = document.querySelectorAll('.message-recipient-message');
  const senders = document.querySelectorAll('.message-sender-message');
  const neutrals = document.querySelectorAll('.message-neutral-message');
  recipients.forEach(inner => {
    switch (isHittingBoundaries(inner, false)) {
      case 'right': {
        inner.classList.add("onRight");
        break;
      }
      default: {
        inner.classList.remove("onRight");
        break;
      }
    }
  });
  senders.forEach(inner => {
    switch (isHittingBoundaries(inner, true)) {
      case 'left': {
        inner.classList.add("onLeft");
        break;
      }
      default: {
        inner.classList.remove("onLeft");
        break;
      }
    }
  });
  neutrals.forEach(inner => {
    switch (isHittingBoundaries(inner)) {
      case 'right': {
        inner.classList.add("onRight");
        break;
      }
      default: {
        inner.classList.remove("onRight");
        break;
      }
    }
  });
}

function insereMensagemReacao(reacao, idMensagem) {
  _GET("/App/Controller/Query/get.controller.php", {
    table_name: "chat_reacao",
    condition: ` AND id_mensagem = ${idMensagem} AND id_usuario = ${SESSION_DATA.id} AND reacao = '${reacao}' AND data_exclusao IS NULL`,
  }).done((data) => {

    const response = JSON.parse(data);
    let form = "";

    let session = getDataSession();
    // adiciona reação
    if (response.length == 0) {
      form += "<form class='d-none' id='formReacao' @tab=@chat_reacao>";
      form += `<input type='text' name='id_mensagem' value="${idMensagem}">`;
      form += `<input type='text' name='id_usuario' value='${session.id}'>`;
      form += `<input type='text' name='reacao' value='${reacao}'>`;
      form += "<input type='text' name='data_reacao' value='now()'>";
      form += "</form>";
    } else {
      // remove reação
      form += "<form class='d-none' id='formReacao' @tab=@chat_reacao>";
      form += `<input type='text' id='inputID' name='id' id-data='true' value='${response[0].id}'>`;
      form += "<input type='text' name='data_exclusao' value='now()'>";
      form += "</form>";
    }

    $('body').append(form);

    // executa form
    _EXEC('formReacao', null, false)
      .done(data => {
        $('#formReacao').remove();

        const session = getDataSession();

        const dataReaction = {
          type: 'reaction',
          messageId: idMensagem,
          dbname: session.dots_acesso[0].pdo_dbname
        }

        conn.send(JSON.stringify(dataReaction));
      })

  });
}

function getMessageId(messageId) {

  const formData = new FormData();
  formData.append('idMensagem', messageId);

  fetch(`${URL_BASE}App/Controller/Chat/MessageAPI.php`, {
    method: 'POST',
    body: formData
  })
    .then(req => req.json())
    .then(res => {
      const { chatId } = JSON.parse(localStorage.getItem('openChat'));
      const message = createMessageData(res.message[0]);
      let template;

      if (message.chatType == 'user') {
        if (chatId == message.sender.id && chatId != SESSION_DATA.id)
          template = messageReceiver(message, 'append', true);
        else if (chatId == message.sender.id && chatId == SESSION_DATA.id)
          template = messageSender(message, 'append', true);
        else
          template = messageSender(message, 'append', true);
      } else {
        if (message.sender.id == SESSION_DATA.id) {
          template = messageSender(message, 'append', true);
        } else {
          template = messageReceiver(message, 'append', true);
        }
      };

      document.querySelector(`#message-${messageId}`).innerHTML = template;
      $(`#message-${messageId}`).after('<p></p>');
    });
}