// What XML generators are currently available on PerlMonks? https://perlmonks.org/?node_id=72241
// PerlMonks Related Scripts https://perlmonks.org/?node_id=26649
// REQUIRES he.js

"use strict";
// throw("Not ready to be incurring load from regular visits");

jQuery(function($) {
  let $currentMsg = $(".cb_msg");
  setTimeout(function(){ $currentMsg.fadeOut(function(){ $(this).remove() }) }, 500000);
  // <span class="cb_author"><a href="?node_id=248054" title="Posted :59:27 (1:19 before next)">Your Mother</a></span>
  $("table.cb_table").css({margin:"1ex 0", fontSize:"1.4rem"}); // Dup.
  let $CBform = $("input[type='submit'][name='message_send']").closest("form");
  $CBform.find("input[name='message']").css({width:"100%",border:"1px solid gray",borderRadius:"2px"});
  $CBform.find("input[name='message_send']").hide();

  $CBform.parent().find("hr, input[type='checkbox']").remove();
  $CBform.find("label, span.msg, span.cb_more_messages").delay(15000).slideUp(1000, function(){ $CBform.parent().find("br").remove() });

  //span.cb_more_messages
  $CBform.parent().css({padding:0});

  // Needs some click animation-
  $("input[type='submit']").css({border:"1px solid gray",borderRadius:"2px",margin:"2px 3px"});

  $("i.cb_quiet").wrap('<div style="margin:1em 0 1ex 0"></div>');

  let intID;
  let chatURI = document.location.origin + "/bare/";
  // .cb_table
  // Timer, interval, like gmail; check frequently if there are a lot of current messages.
  // Less and less frequently when there is none.
  // getCB
  // displayCB
  function getCB ( arg ) {
    if ( ! arg ) arg = { timeout: 5000 };
    if ( arg.timeout < 500000 ) arg.timeout += 10000; // maybe 10% of current instead?

    let queryData = { "node_id":207304 // hardcode node…
                     ,"xmlstyle":"modern" } // Get the parsed->rendered messages.
    $.ajax({
            method: "GET"
           ,url: chatURI
           ,data: queryData
           ,dataType: "xml"
        })
        .fail(function(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log([textStatus, errorThrown || "unknown"].join(": "));
            console.log('setTimeout( getCB, ' + arg.timeout + ', arg );');
            intID = setTimeout( getCB, arg.timeout, arg );
        })
        .done(function( xml, textStatus, jqXHR ) {
            console.log("Received…", xml);
            if ( ! xml ) {
                console.log('setTimeout( getCB, ' + arg.timeout + ', arg );');
                intID = setTimeout( getCB, arg.timeout, arg );
                return false;
            }
            // Getting null sometimes.
            let messages = xml.getElementsByTagName("message");
            if ( ! messages.length ) {
                console.log('setTimeout( getCB, ' + arg.timeout + ', arg );');
                intID = setTimeout( getCB, arg.timeout, arg );
                return false;
            }

            let $CBtable = $("table.cb_table");
            if ( ! $CBtable.length ) { // No messages in the page currently…
                $CBtable = $('<table class="cb_table" border="0" width="100%" cellspacing="0" cellpadding="2"></table>');
                // <i class="cb_quiet">and all is quiet...</i>
                // Always there by class? <i class="cb_quiet">and all is quiet...</i>
                $("i.cb_quiet").replaceWith($CBtable);
            }

            $CBtable.css({margin:"1ex 0", fontSize:"1.4rem"}); // Dup…

            for (var i = 0; i < messages.length; i++ )
            {
                let message = {
                    author: messages[i].getElementsByTagName("author")[0].textContent
                   ,user: messages[i].getElementsByTagName("author_user")[0].textContent
                   ,epoch: messages[i].getElementsByTagName("createdepoch")[0].textContent
                   ,id: messages[i].getElementsByTagName("message_id")[0].textContent
                   ,text: messages[i].getElementsByTagName("parsed")[0].textContent
                };

                // Skip duplicates!

                let renderedMessage = `
  <tr class="cb_msg msg_id_${message.id}">
    <td><!-- class -> odd-row/even-row, but CSS is better -->
      <span class="chat">
        <span class="chatfrom_${message.user}">
          <span class='cb_sq_br'>[</span><span class='cb_author'><a href="?node_id=${message.user}">${message.author}</a></span><span class='cb_sq_br'>]</span><span class='cb_sep'>:</span>
          <span class='content'>${message.text}</span>
        </span>
      </span>
    </td>
  </tr>`;

                setTimeout(function(){ $(".msg_id_" + message.id).fadeOut() }, 500000);
                console.log(renderedMessage);
                $CBtable.append(renderedMessage); // I think the direction is settable…
            }

            intID = setTimeout( getCB, 5000 );
            });
  }

  getCB();

  // console.log( "node_id from CB form -> " + $CBform.find("input[name='node_id']").val() );

  $CBform.submit(function(evt){
      evt.preventDefault();
      sendMessage();
  });

  function sendMessage () {
      let formData = {
          node_id: $CBform.find("input[name='node_id']").val()
          ,op: $CBform.find("input[name='op']").val() // "message"
          ,message: he.encode( $CBform.find("input[name='message']").val() )
          ,message_send: $CBform.find("input[name='message_send']").val() // "talk"
      };

      console.log(formData);

      $.ajax({
              method: $CBform.attr("method")
             ,url: $CBform.attr("action")
             ,data: formData
        })
        .fail(function(jqXHR, textStatus, errorThrown){
                console.log(jqXHR);
                console.log(".fail -> " + [textStatus, errorThrown || "unknown"].join(": "));
        })
        .done(function( html, textStatus, jqXHR ) {
                $CBform.find("input[name='message']").val("");
                clearTimeout(intID);
                getCB({ timeout: 10000 });
        });
  }

  $(document).on("visibilitychange", function(){
      if ( document.hidden )
      {
          console.log("Tab is hidden, ceasing ajax CB");
          clearTimeout(intID);
      }
      else
      {
          getCB({ timeout: 60000 });
          console.log("Tab is visible, restarting ajax CB");
      }
  });

});