"use strict";

if ( typeof $().emulateTransitionEnd !== 'function')
{
    throw("Bootstrap doesn’t seem to be available…");
}

function colorReps() {
    $("div.reputation").each(function(){
        $(this).text().match(/\s\d/) ?
            $(this).css({color:"teal", opacity:0.66, fontSize:"85%"}) :
            $(this).css({color:"#DF3969", opcaity:0.66 , fontSize:"85%"});
    });
}

function submitVote () {
    // Need to unbind and/or include a spinner.
    console.log("submitVote…");
    let $clicked = $(this);
    $clicked.off(); // Right?
    $clicked.closest("div").animate({opacity:0},999)
        .children().prop("disabled",true);
    let $vote = $clicked.parent("label").find("button");
    let $form = $vote.closest("form");
    let voteName = $vote.attr("name");
    let voteNodeId = voteName.replace(/vote__/,"");
    let nodeId = $form.find("input[name='node_id']").val();

    let formData = {
        node_id: nodeId
       ,vc: $form.find("input[name='vc']").val()
       ,op: $form.find("input[name='op']").val()
       ,sexisgreat: $form.find("input[name='sexisgreat']").val()
    };
    formData[voteName] = $vote.val();

    $.ajax({ method: $form.attr("method")
            ,url: $form.attr("action")
            ,data: formData
        })
        .fail(function(jqXHR, textStatus, errorThrown){
                console.log(jqXHR);
                if ( textStatus === "abort" ) return;
                $clicked.closest("div").stop().animate({ opacity: 1 });
                $vote.closest("div.reputation").text([textStatus, errorThrown || "unknown"].join(": "));
        })
        .done(function( html, textStatus, jqXHR ) {
            console.log("here in top of done with node " + nodeId + " and vote " + voteNodeId);
            console.log("div.reputation with node " + nodeId + " and vote " + voteNodeId);
            let $html = $($.parseHTML(html));
            let $rep = $html.find("#rep-" + voteNodeId);
            console.log("received html find " + $rep.html());
            $rep.css({opacity:0});
            $clicked.closest("div").replaceWith($rep);
            $rep.animate({ opacity: 1 }, 666);

            let $xp = $("h1:contains(XP Nodelet)")
                .filter(function(){ return $(this).children().length === 0 })
                .parent()
                .find("div");

            // Can't use the same selector because the DOM isn't the same pre-transform.
            let $newXp = $html.find("#XP_Nodelet td");
            // Account for out of votes for day.
            if ( $newXp.length )
            {
                $xp.fadeOut(100, function(){ $(this).html( $newXp.html() ).fadeIn(100) });
            }
            else
            {
                $xp.closest("section").fadeOut(100, function(){ $(this).remove() });
                // Remove all vote buttons too. Untested, might work.
                $("div.reputation").find("button").closest("div.reputation")
                    .fadeOut(100, function(){ $(this).remove() });
            }
            colorReps();
        });
}

jQuery(function($) {
    $("body").hide().fadeIn(100);
    colorReps();

    $("body").css({ color:"#00000a" }); // not being carried over anywhere...

    let $stripe = $('<div style="font-size:1.5rem; text-align:left; position:fixed; bottom:16rem; left:-11rem; transform:rotate(-90deg); line-height:1rem; color:teal">Your Mother’s pm.2.0.js is loading…</div>');
    $("body").append($stripe);

    // Block bottom page/viewed controls.
    $("#nodethreads-foot form").submit(function(){ return false });

    // Block voting <input type="hidden" name="op" value="vote">
    $("input[name='op'][value='vote']").closest("form").submit(function(){ return false });

    $("input[name='node']").css({width:"100%"});
    let $postBody = $("textarea[name='note_doctext']");
    $postBody.css({width:"100%", fontFamily:"monospace"});
    if ( $postBody.length )
    {
      let $stash = $('<div style="display:hidden"/>');
      $postBody.parent().append($stash);
      $stash.data( "post", $postBody.val().replace(/\s+/g,"") );
      window.onbeforeunload = function() {
        if ( $("submit['op']").val() == "op" ) return null;
        if ( $("submit['op']").val() == "create" ) return null;
        return $stash.data("post") == $postBody.val().replace(/\s+/g,"") ?
            null : "Unsaved…";
      };
    }

    let $voteForm = $("form").find('input[name="op"][value="vote"]').parent("form");
    $voteForm.find("input[name='sexisgreat']").remove(); // Ajax -> no vote button.
    // DOM elements.
    let voteMap = { "1": '<button title="++" style="border:0; background-color:inherit; font-size:1.75rem; padding:2px 0; color:teal; "><span class="glyphicon glyphicon-thumbs-up"></span></button>',
                   "-1": '<button title="--" style="border:0; border-radius:100%; background-color:inherit; font-size:1.75rem; padding:2px 0; color:#DF3969"><span class="glyphicon glyphicon-thumbs-down"></span></button>' };
    $voteForm.find('input[type="radio"]').each(function (i, v) {
        let $label = $(v).parent("label");
        let $button = $(voteMap[$(v).val()]);
        $button.attr("name",$(v).attr("name"));
        $button.attr("value",$(v).val());
        $label.html($button);
        $button.on("click", submitVote);
    });

    let $viewedForm = $("input[name='pageloadtime']").closest("form");
    $viewedForm.submit(function(evt){ evt.preventDefault() });

    $viewedForm.find("input[type='submit']").on("click", function(evt){
        console.log(evt);
        console.log($(evt.target).html());
        console.log(evt.target.nodeName);
        let $submit = $(evt.target);
        let formData = $viewedForm.serializeArray();
        formData.push({ name:$submit.attr("name"), value:$submit.val() });
        $("body").children().fadeOut(100);
        console.log( $viewedForm.attr("method") + " " + $viewedForm.serialize() );
        console.log(formData);
        $.ajax({
            method: $viewedForm.attr("method")
           ,url: $viewedForm.attr("action")
           ,data: formData
        })
        .fail(function(jqXHR, textStatus, errorThrown){
            if ( textStatus === "abort" ) return;
            let err = [textStatus, errorThrown || "unknown"].join(": ");
            let $err = $('<div style="position:absolute; top:20%; left:50%; margin-left:-25%;"></div>');
            $err.text(err).fadeIn().delay(2000).fadeOut(); // Should remove, wrote this once already…
            $("body").children().fadeIn(100);
        })
        .done(function( html, textStatus, jqXHR ) {
               let newDoc = document.open("text/html", "replace");
               // html = html.replace(/<body /, '<body style="animation: fadein 2s" ');
               html = html.replace(/<body /, '<body style="display:none" ');
               console.log(html);
               newDoc.write(html);
               newDoc.close();
        });

        return false;
    });

    $stripe.fadeOut(100, function(){ $(this).text("Your Mother is loaded with tobyink’s help").fadeIn() });
});

/*
Features
  * Warning/confirm if leaving page with unsubmitted changes. Too aggressive right now.
  * Ajax voting on nodes.
  * Ajax "Check Time" interception and reload to keep page GET.

To do
  * Abort ajax on page leave; maybe https://stackoverflow.com/a/32448228/109483
*/