var emptyerror = "Please fill out all fields.";
var emailerror = "Please enter a valid email address.";
var proxyPathLookup = "/apps/orderLookupApp/lookup";
var proxyPathEmail = "/apps/orderLookupApp/email";
var proxyPathTracking = "/apps/orderLookupApp/tracking";
var formBody = "<style type=\"text/css\">#ola_submitButton, #ola_backButton, .ola_trackingDetailLink {}#ola_error{}#ola_orderLookUp_formWrapper .needsfilled{}#ola_lookupForm{}</style> <div id=\"ola_orderLookUp_formWrapper\"> <h1 id=\"ola_formTitleText\"></h1> <form id=\"ola_lookupForm\" onsubmit=\"event.preventDefault();\"> <input type=\"hidden\" name=\"ignore\" id=\"ola_ignore\" value=\"\" /> <input type=\"hidden\" name=\"hash\" id=\"ola_hash\" value=\"\" /> <span id=\"ola_orderEmailField\"> <label for=\"ola_email\">Email Address </label> <input type=\"text\" name=\"email\" id=\"ola_email\" value=\"\" /> </span> <span id=\"ola_orderNumberField\"> <label for=\"ola_orderNumber\">Order Number</label> <input type=\"text\" name=\"orderNumber\" id=\"ola_orderNumber\" value=\"\" /> </span> <div id=\"ola_error\" style=\"display:none;\"></div> <input type=\"button\" value=\"Find Order\" id=\"ola_submitButton\" class=\"btn button\" /> </form> <p id=\"ola_formFooterText\"></p> <div id=\"ola_searching\" style=\"display:none;\">Please wait, searching...</div> </div> <div id=\"ola_orderLookUp_result\" style=\"display:none;\" />"; //already json encoded
var cssURL= "https://orderlookupapp.com/lookup-core/src/css/orderLookup.css";
var emailOnly = false;
var retryLimit = 6;
var lang = {"checkpoint_error_title":"Error","checkpoint_error_message":"An error has occured while tracking your order","checkpoint_infoReceived_title":"Information Recieved","checkpoint_infoReceived_message":"Carrier has received request from shipper and is about to pick up the shipment","checkpoint_pending_title":"Pending","checkpoint_pending_message":"Please try again later, we are awaiting tracking info from the carrier","checkpoint_cantTrack_title":"Shipment can not be tracked","checkpoint_cantTrack_message":"Tracking information is not available from this carrier"}; //already json encoded
var dateFormatCode = 0;
var autoExpand = 0;
// for the linters
/*
global emptyerror
,emailerror
,proxyPathLookup
,proxyPathEmail
,proxyPathTracking
,formBody
,cssURL
,emailOnly
,retryLimit
,lang
,dateFormatCode
,autoExpand
*/

// -------------------------------------

var tryCount = 0;
var emailOnlyLocal = emailOnly;
var head = document.head;

// -------------------------------------

function ola_loadCSS() {

    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = cssURL;

    head.appendChild(link);
}

// -------------------------------------

function ola_doSubmit() {
    // setup some local variables

    var form = document.getElementById('ola_lookupForm');
    var formData = new FormData(form);
    var serializedData = new URLSearchParams(formData);

    document.getElementById('ola_searching').style.display = "block";

    // let"s disable the inputs for the duration of the ajax request
    var inputs = document.querySelectorAll("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = true;
    }

    var submitPath = proxyPathLookup;

    if (emailOnlyLocal === true) {
        submitPath = proxyPathEmail;
    }

    var xhr = new XMLHttpRequest();

    //--------------------
    //runs when we dont have an error
    xhr.addEventListener('load', function () {
        ola_autoExpandDetails();
    });

    //--------------------
    // Define what happens in case of error
    xhr.addEventListener('error', function () {
        console.log('An Error occured - 001');
    });

    //--------------------
    //always run this - for all responses
    xhr.addEventListener('loadend', function () {

        //Hide the form and show the results   
        document.getElementById('ola_orderLookUp_formWrapper').style.display = "none";
        document.getElementById('ola_searching').style.display = "none";

        var ola_orderLookUp_result = document.getElementById('ola_orderLookUp_result');
        ola_orderLookUp_result.innerHTML = this.responseText;
        ola_orderLookUp_result.style.display = "block";

        var ola_trackingListObj = document.getElementById('ola_trackingList');

        if (ola_trackingListObj != null) {

            if (ola_trackingListObj.value) {

                var ola_trackingList = ola_trackingListObj.value;

                var ola_trackingArray = ola_trackingList.split(",");

                var ola_trackingArrayLen = ola_trackingArray.length;

                for (var i = 0; i < ola_trackingArrayLen; i++) {
                    console.log(ola_trackingArray[i]);
                    ola_getStatus(ola_trackingArray[i]);
                }

            }

        }

        //control what the back button does
        var ola_backButton = document.getElementById("ola_backButton");

        if (ola_backButton) {
            ola_backButton.addEventListener('click', function (event) {
                event.preventDefault();

                //reset the form values
                document.getElementById("ola_orderNumber").value = "";
                document.getElementById("ola_email").value = "";
                document.getElementById("ola_hash").value = "";

                //show the form again, hide the results
                document.getElementById("ola_orderLookUp_result").style.display = "none";
                document.getElementById("ola_orderLookUp_formWrapper").style.display = "block";
            });
        }

        // enable the inputs after the request returns
        var inputs = document.querySelectorAll("input");
        for (i = 0; i < inputs.length; i++) {
            inputs[i].disabled = false;
        }

    });

    //--------------------
    document.getElementById('ola_searching').style.display = "block";

    //do the ajax post
    xhr.open('POST', submitPath);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send(serializedData);

}

// -------------------------------------

function ola_doValidate() {
    //required fields
    var required;

    if (emailOnlyLocal === false) {
        required = ["ola_orderNumber", "ola_email"];
    }
    else {
        required = ["ola_email"];
    }

    var email = document.getElementById('ola_email');
    var errornotice = document.getElementById('ola_error');

    var errorMessages = "";

    var input;

    //Validate required fields
    for (var index = 0; index < required.length; index++) {

        input = document.getElementById(required[index]);
        if ((input.value === "") || (input.value === emptyerror)) {
            input.classList.add("needsfilled");
            errorMessages = emptyerror;
        }
        else {
            input.classList.remove("needsfilled");
        }
    }

    //trim leading and trailing spaces
    email.value = email.value.trim();

    // Validate the e-mail.
    var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (emailRegex.test(email.value) === false) {

        //md5 hash is always 32 characters
        if (email.value.length != 32) {
            email.classList.add("needsfilled");

            if (errorMessages != "") {
                errorMessages = errorMessages + "<br/>" + emailerror;
            }

            else {
                errorMessages = emailerror;
            }

        }

    }

    var inputs = document.querySelectorAll("input");

    var errorFound = 0;

    //if any inputs on the page have the class "needsfilled" the form will not submit
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].classList.contains("needsfilled")) {
            errornotice.innerHTML = errorMessages;
            errornotice.style.display = "block";
            errorFound = 1;
        }
    }

    if (errorFound == 0) {
        errornotice.innerHTML = "";
        errornotice.style.dispaly = "none";
        ola_doSubmit();
    }
}

// -------------------------------------

function ola_showEmailToggle() {

    toggle("ola_emailLookupLink");
    toggle("ola_lookupLink");
    toggle("ola_orderNumberField");
    emailOnlyLocal = !emailOnlyLocal; //toggle the value;
}

// -------------------------------------

function ola_getParameterByName(name) {
    name = name.replace(/[[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    var results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// -------------------------------------

function ola_preLoaded() {
    //some version of jquery set ola_getParameterByName to NULL, others to ""
    var ordernumber = ola_getParameterByName("ordernumber");
    var email = ola_getParameterByName("email");
    var ignore = ola_getParameterByName("ignore");
    var hash = ola_getParameterByName('hash');
    var emaillookup = ola_getParameterByName('emaillookup');

    //http://stackoverflow.com/questions/5515310/is-there-a-standard-function-to-check-for-null-undefined-or-blank-variables-in
    //will evaluate to true if value is not: null, undefined, NaN. empty string (""), 0, false

    if ((ordernumber && hash) || (ordernumber) && (email)) {

        //console.log("in here");

        document.getElementById("ola_orderNumber").value = ordernumber;
        document.getElementById("ola_email").value = email;
        document.getElementById("ola_ignore").value = ignore;
        document.getElementById("ola_hash").value = hash;

        ola_doSubmit();
    }

    else if (emaillookup) {
        ola_showEmailToggle();
    }

}

// -------------------------------------

function ola_autoExpandDetails() {

    //open everything up id auto expand is on
    if (autoExpand == true) {
        var ola_orderLookUp_result = document.getElementById("ola_orderLookUp_result")
        if (ola_orderLookUp_result) {
            ola_orderLookUp_result.style.display = "block";
        }
    }
}

// -------------------------------------

function ola_autoExpandTracking() {
    //jq(".ola_trackingDetailLink").click();
    document.getElementById('ola_orderLookUp_result').getElementsByClassName('ola_trackingDetailLink')[0].click();
}

// -------------------------------------

function ola_parseIsoDatetime(dtstr) {
    var dt = dtstr.split(/[: T-]/).map(parseFloat);
    return new Date(dt[0], dt[1] - 1, dt[2], dt[3] || 0, dt[4] || 0, dt[5] || 0, 0);
}

// -------------------------------------

function ola_formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? "pm" : "am";
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? "0" + minutes : minutes;
    var strTime = hours + ":" + minutes + " " + ampm;
    return strTime;
}

// -------------------------------------

function ola_dateFormat(theDate, formatCode) {
    if (formatCode === 0) // yyyy-mm-dd
    {
        return theDate;
    }

    if (formatCode === 1) // yyyy-mm-dd
    {
        return theDate.replace("-", "/");
    }

    var dateArray = theDate.split("-");

    if (formatCode === 2) // mm-dd-yyyy
    {
        return dateArray[1] + "-" + dateArray[2] + "-" + dateArray[0];
    }

    if (formatCode === 3) // mm-dd-yyyy
    {
        return dateArray[1] + "/" + dateArray[2] + "/" + dateArray[0];
    }

    if (formatCode === 4) // mm-dd-yyyy
    {
        return dateArray[2] + "." + dateArray[1] + "." + dateArray[0]; //dd.mm.yyyy
    }

    return theDate; //fail safe
}

// -------------------------------------

function ola_processCheckPoints(data) {
    var output = "<div class=\"checkpoints\"><ul class=\"checkpoints_list\">";
    var checkpoints = data.checkpoints;

    var body;
    var percent = 0;
    var delivered = false;

    var deliveryMessage;
    var deliveryDate;

    //loop over checkpoints
    checkpoints.forEach(function (checkpoint) {
        var date = ola_parseIsoDatetime(checkpoint.checkpoint_time);

        var theMonth = date.getMonth() + 1;
        if (theMonth < 10) {
            theMonth = "0" + theMonth;
        }

        var theDate = date.getDate();
        if (theDate < 10) {
            theDate = "0" + theDate;
        }

        var friendlyDate = date.getFullYear() + "-" + theMonth + "-" + theDate;
        friendlyDate = ola_dateFormat(friendlyDate, dateFormatCode);

        var friendlyTime = ola_formatAMPM(date);
        var message = checkpoint.message;
        var carrier = checkpoint.slug;
        var location = checkpoint.location;
        var tag = checkpoint.tag;

        //if the locartion is null, zero it out
        if (location === null) {
            location = "";
        }

        body = "<li class=\"checkpoint\">";
        body += "<div class=\"checkpoint_time\">";
        body += "<strong>" + friendlyDate + "</strong>";
        body += "<div class=\"hint\">" + friendlyTime + "</div>";
        body += "</div>";

        switch (tag) {
            case "InfoReceived":
                body += "<div class=\"checkpoint_icon inforeceived\"></div>";
                percent += 10;
                break;
            case "InTransit":
                body += "<div class=\"checkpoint_icon intransit\"></div>";
                percent += 10;
                break;
            case "OutForDelivery":
                body += "<div class=\"checkpoint_icon outfordelivery\"></div>";
                percent += 10;
                break;
            case "Delivered":
                body += "<div class=\"checkpoint_icon delivered\"></div>";
                delivered = true;
                deliveryMessage = message;
                deliveryDate = friendlyDate;
                break;
            case "attemptfail":
                body += "<div class=\"checkpoint_icon attemptfail\"></div>";
                break;
            case "exception":
                body += "<div class=\"checkpoint_icon exception\"></div>";
                break;
            case "expired":
                body += "<div class=\"checkpoint_icon expired\"></div>";
                break;
            case "pending":
                body += "<div class=\"checkpoint_icon pending\"></div>";
                break;
            default:
                body += "<div class=\"checkpoint_icon\"></div>";
                break;
        }

        body += "<div class=\"checkpoint_content\">";
        body += "<strong>" + message + "<span class=\"checkpoint_courier-name\">" + carrier + "</span></strong>";
        body += "<div class=\"hint\">" + location + "</div>";
        body += "</div>";
        body += "</li>";

        //append the body to the output
        output += body;
    });

    if (delivered === true) {
        percent = 100;
    }
    else if (percent >= 100) {
        percent = 85;
    }

    //close it up
    output += "</ul></div>";

    var returnData = {
        output: output,
        percent: percent,
        shipmentTag: data.tag,
        expected: data.expected,
        delivered: delivered,
        deliveryDate: deliveryDate,
        deliveryMessage: deliveryMessage
    };

    return returnData;
}

// -------------------------------------

function ola_processStatus(data) {
    var body;
    var title = lang.checkpoint_error_title;
    var message = lang.checkpoint_error_message;

    if (data.tag === "InfoReceived") {
        title = lang.checkpoint_infoReceived_title;
        message = lang.checkpoint_infoReceived_message;
    }

    if (data.tag === "Pending") {
        title = lang.checkpoint_pending_title;
        message = lang.checkpoint_pending_message;
    }

    if (data.tag.indexOf("OLA_CantTrack") !== -1) {
        title = lang.checkpoint_cantTrack_title;
        message = lang.checkpoint_cantTrack_message;
    }

    body = "<div class=\"ola_noCheckpoints\">";
    body += "	<div class=\"ola_noCheckpointsTitle\">" + title + "</div>";
    body += "	<div class=\"ola_noCheckpointMessage\">" + message + "</div>";
    body += "</div>";

    return body;
}

// -------------------------------------

function ola_getStatus(trackingID) {

    console.log("getStatus" + trackingID);

    var loadingHolder = 'ola_loading_' + trackingID;
    var trackingHolder = 'ola_tracking_' + trackingID;
    var trackingDetails = 'ola_details_' + trackingID;
    var notShippedDetails = 'ola_notShipped_' + trackingID;
    var percentBar = 'ola_percentBar_' + trackingID;
    var expected = 'ola_expected_' + trackingID;
    var delivered = 'ola_delivered_' + trackingID;

    var xhr = new XMLHttpRequest();

    //--------------------
    // Define what happens in case of error
    xhr.addEventListener('error', function () {
        console.log('Error occured');

        tryCount++;
        if (tryCount <= retryLimit - 1) {
            setTimeout(function () {
                ola_getStatus(trackingID);
            }, 7000); //7 seconds - good band :)
        }
        else {
            document.getElementById(loadingHolder).style.display = "none";
        }
    });

    //--------------------
    //runs when we dont have an error
    xhr.addEventListener('load', function () {

        var returnData = JSON.parse(this.responseText);

        console.log(returnData);

        if ((returnData.tag === "Pending") || (returnData.tag === "InfoReceived")) {

            //if its pending, try a few more times.
            tryCount++;
            if (tryCount <= retryLimit - 1) {
                console.log("trying again");
                setTimeout(function () {
                    ola_getStatus(trackingID);
                }, 7000); //7 seconds
            }
            else {
                document.getElementById(notShippedDetails).innerHTML = ola_processStatus(returnData);
                document.getElementById(loadingHolder).style.display = "none";
                document.getElementById(notShippedDetails).style.display = "block";
            }

        }

        else if (returnData.tag.indexOf("OLA_CantTrack") !== -1) {
            document.getElementById(notShippedDetails).innerHTML = ola_processStatus(returnData);
            document.getElementById(loadingHolder).style.display = "none";
            document.getElementById(notShippedDetails).style.display = "block";
        }

        else {
            var orderData = ola_processCheckPoints(returnData);

            console.log(orderData);

            document.getElementById(trackingDetails).innerHTML = orderData.output;

            if (orderData.delivered === true) {
                var deliveredEl = document.getElementById(delivered);

                deliveredEl.getElementsByClassName('ola_deliveryDate')[0].innerHTML = "(" + orderData.deliveryDate + ")";
                deliveredEl.getElementsByClassName('ola_deliveryMessage')[0].innerHTML = orderData.deliveryMessage;
                deliveredEl.style.display = "block";
            }
            else {
                if (orderData.expected === null) {
                    orderData.expected = "Unknown";
                }

                var expectedDate = "Expected Delivery " + orderData.expected;
                document.getElementById(expected).innerHTML = expectedDate;
            }

            document.getElementById(percentBar).style.width = orderData.percent + "%";

            document.getElementById(loadingHolder).style.display = "none";
            document.getElementById(trackingHolder).style.display = "block";

            //auto expand if we have details
            if (autoExpand == true) {
                ola_autoExpandTracking();
            }

        }
    });

    var params = "trackingID=" + trackingID;

    //do the ajax post
    xhr.open('GET', proxyPathTracking + "?" + params);
    xhr.send(null);
}

// -------------------------------------

function ola_getForm() {

    const el = document.querySelector("#nll_orderLookUpHook");
    el.insertAdjacentHTML('afterend', formBody);

    // Clears any fields in the form when the user clicks on them
    var inputs = document.querySelectorAll("input");

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener('focus', function () {
            this.classList.remove("needsfilled");
        });
    }

    //----------

    document.getElementById("ola_submitButton").addEventListener('click', function () {
        ola_doValidate();
    });

    var ola_emailLookupLink = document.getElementById("ola_emailLookupLink");
    if (ola_emailLookupLink) {
        ola_emailLookupLink.addEventListener('click', function (event) {
            event.preventDefault();
            ola_showEmailToggle();
        });
    }

    var ola_lookupLink = document.getElementById("ola_lookupLink");
    if (ola_lookupLink) {
        ola_lookupLink.addEventListener('click', function (event) {
            event.preventDefault();
            ola_showEmailToggle();
        });
    }

    //this link loads later, but bind the action now
    document.getElementById('ola_orderLookUp_result').addEventListener('click', function (event) {
        event.preventDefault();
        var clickedEl = event.target;
        if (clickedEl.id === 'ola_orderDetailsLink') {
            event.preventDefault();
            clickedEl.style.display = 'none';

            ola_slideDown(document.getElementById("ola_orderDetailsWrapper"), 600);
        }
    });

    //this link loads later, but bind the action now
    document.getElementById('ola_orderLookUp_result').addEventListener('click', function (event) {
        var clickedEl = event.target;
        if (clickedEl.id === 'ola_orderDetailsClose') {
            event.preventDefault();

            ola_slideUp(document.getElementById("ola_orderDetailsWrapper"), 600);
            document.getElementById("ola_orderDetailsLink").style.display = "block";
        }
    });


    //this link loads later, but bind the action now
    document.getElementById('ola_orderLookUp_result').addEventListener('click', function (event) {

        var clickedEl = event.target;

        if (clickedEl.classList.contains('ola_trackingDetailLink')) {
            event.preventDefault();

            var trackID = clickedEl.getAttribute('data-trackingID')
            var trackingDetails = document.getElementById("ola_details_" + trackID);

            ola_slideToggle(trackingDetails, 600);

            //change the text and the float
            if (clickedEl.innerText == clickedEl.getAttribute("data-text")) {
                clickedEl.innerText = " x ";
                clickedEl.parentNode.style.float = "none";
            }
            else {
                clickedEl.innerText = clickedEl.getAttribute("data-text");
                clickedEl.parentNode.style.float = "right";
            }
        }
    });

}

// -------------------------------------

function toggle(id) {
    var element = document.getElementById(id);
    if (element.style.display === "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}

// -------------------------------------

let ola_slideUp = (target, duration = 500) => {
    target.style.transitionProperty = 'height, margin, padding';
    target.style.transitionDuration = duration + 'ms';
    target.style.boxSizing = 'border-box';
    target.style.height = target.offsetHeight + 'px';
    target.offsetHeight;
    target.style.overflow = 'hidden';
    target.style.height = 0;
    target.style.paddingTop = 0;
    target.style.paddingBottom = 0;
    target.style.marginTop = 0;
    target.style.marginBottom = 0;
    window.setTimeout(() => {
        target.style.display = 'none';
        target.style.removeProperty('height');
        target.style.removeProperty('padding-top');
        target.style.removeProperty('padding-bottom');
        target.style.removeProperty('margin-top');
        target.style.removeProperty('margin-bottom');
        target.style.removeProperty('overflow');
        target.style.removeProperty('transition-duration');
        target.style.removeProperty('transition-property');
        //alert("!");
    }, duration);
}

let ola_slideDown = (target, duration = 500) => {
    target.style.removeProperty('display');
    let display = window.getComputedStyle(target).display;

    if (display === 'none') {
        display = 'block';
    }

    target.style.display = display;
    let height = target.offsetHeight;
    target.style.overflow = 'hidden';
    target.style.height = 0;
    target.style.paddingTop = 0;
    target.style.paddingBottom = 0;
    target.style.marginTop = 0;
    target.style.marginBottom = 0;
    target.offsetHeight;
    target.style.boxSizing = 'border-box';
    target.style.transitionProperty = "height, margin, padding";
    target.style.transitionDuration = duration + 'ms';
    target.style.height = height + 'px';
    target.style.removeProperty('padding-top');
    target.style.removeProperty('padding-bottom');
    target.style.removeProperty('margin-top');
    target.style.removeProperty('margin-bottom');
    window.setTimeout(() => {
        target.style.removeProperty('height');
        target.style.removeProperty('overflow');
        target.style.removeProperty('transition-duration');
        target.style.removeProperty('transition-property');
    }, duration);
}


var ola_slideToggle = (target, duration = 500) => {
    if (window.getComputedStyle(target).display === 'none') {
        return ola_slideDown(target, duration);
    } else {
        return ola_slideUp(target, duration);
    }
}

//-----------------------

ola_loadCSS();
ola_getForm();
ola_preLoaded();