$(document).ready(()=>{

  const baseUrl = `http://${window.location.hostname}`;
  const content = $('.content');
  const urlString = window.location.href;
  const url = new URL(urlString);
  const sid = url.searchParams.get("sid");

  $.getJSON( baseUrl + "/apis/getMessages.php", {
    sid: sid
  }).done( (session)=> {
    console.log(session);

    if(session.enabled){
      $.each(session.messages, (index,item)=>{
        if(item.timer != session.start){
          const now = Date.now() / 1000;
          const timer = Date.parse(item.timer) / 1000;
          const start = Date.parse(session.start) / 1000;

          if(now > timer){
            showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages);
          } else {
            const delay = (timer - now);
            setTimeout( ()=>{
              showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages);
            },1000*delay);
          }
        }
      });
    }
  });


  function showCloud(title, text, img, actions, messages){

    const image = img ? `<img src="${img}"` : '';
    const long_text = text[1] ? `<div class="long-text">
                                  <button class="toggle button confirm">More...</button>
                                  <div class="text-content">${text[1]}</div>
                                </div>` : '';

    const cloud = $(`<div class="cloud left">
                      <div class="title">${title}</div>
                      <div class="short-text">${text[0]}</div>
                      ${long_text}
                      ${image}
                    </div>`);

    cloud.find('.toggle').on('click', (e)=>{
      const button = $(e.currentTarget);
      const text = button.siblings('.text-content');
      if(text.is(':visible')){
        button.text('More...');
        text.slideUp();
      }else{
        button.text('Less...');
        text.slideDown();
      }
    });
    content.append(cloud);

    if(actions.length){

      const actionsContainer = $('<div class="actions"></div>');
      $.each(actions, (index, value)=>{
        const button = $(`<button class="goto button dotted" data-goto="${value.mid}">${value.label}</button>`);

        button.on('click', (e)=>{
          const goto = $(e.currentTarget);
          const messageId = goto.data('goto');
          const fullMessage = messages.filter( (m)=> m.id == messageId);
          showCloud(fullMessage[0].title, [fullMessage[0].short_text, fullMessage[0].long_text], fullMessage[0].image, fullMessage[0].actions, messages);
        });

        actionsContainer.append(button);
      });

      content.append(actionsContainer);
    }

    scrollBottom();
    notify(true);
  }

  function scrollBottom(){
    $('html, body').stop().animate({
      scrollTop: $('.cloud').last().offset().top
    }, 1000);
  }

  function notify(vibrate){
    if(vibrate){
      const canVibrate = "vibrate" in navigator || "mozVibrate" in navigator;
      if (canVibrate && !("vibrate" in navigator)){navigator.vibrate = navigator.mozVibrate;}
      navigator.vibrate(500);
    }
    $('#notify1')[0].play();
  }

});