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> <p id=\"ola_formHeaderText\">If you like to review your order, please enter your email and order number into the fields below. Please allow 24 hours from your purchase time for the order and tracking status to update. International may take 24-48 hours to properly update.</p> <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 My 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 avaliable from this carrier"}; //already json encoded
var dateFormatCode = 3;
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();