//Run this function when we have loaded the HTML document
window.onload = function () {
    //This code is called when the body element has been loaded and the application starts

    //Request items from the server. The server expects no request body, so we set it to null
    sendRequest("GET", "rest/shop/testing", null, function (itemsText) {
        //This code is called when the server has sent its data
        var items = JSON.parse(itemsText);
        addItemsToTable(items);
    });

    //Register an event listener for button clicks
    var updateButton = document.getElementById("update");
    addEventListener(updateButton, "click", function () {
        //Same as above, get the items from the server
        sendRequest("GET", "rest/shop/testing", null, function (itemsText) {
            //This code is called when the server has sent its data
            var items = JSON.parse(itemsText);
            addItemsToTable(items);
        });
    });

    $("#create-customer-submit-button").click(function () {
        var login = document.getElementById("login-customer-submit-button");
        var create = document.getElementById("create-customer-submit-button");
        createCustomer();
        create.disabled = true;
        login.disabled = true;

    });

    $("#login-customer-submit-button").on("click",function () {
        loginCustomer();
    });
    /*
    $("#login-customer-submit-button").click(function () {
        loginCustomer();
    });
    */

    eow();
    addItemsToCartWhenClick();
};



function createCustomer() {
    var createCustomerName = document.getElementById("createUserName").value;
    var createCustomerPassword = document.getElementById("createUserPassword").value;

    $.post("/rest/shop/createCustomer",{
        username: createCustomerName,
        password: createCustomerPassword
    },function (name) {
        var login = document.getElementById("login-customer-submit-button");
        var create = document.getElementById("create-customer-submit-button");
        if(name =="true"){
            errorMessage("Your are now a customer");
            login.disabled = true;
            create.disabled = true;
        }else {
            errorMessage()
        }
    });

}

function loginCustomer() {
    var customerName = document.getElementById("createUserName").value;
    var customerPass = document.getElementById("createUserPassword").value;

    $.post("/rest/shop/loginCustomer",{
        username: customerName,
        password: customerPass
    },function (name) {
        var login = document.getElementById("login-customer-submit-button");
        var create = document.getElementById("create-customer-submit-button");
        if(name =="true"){
            errorMessage("You are now logged in. Boolean is " + name);
            create.disabled = true;
            login.disabled = true;
        }else {
            errorMessage("We could not log you in. Boolean is " + name);
            login.disabled = false;
            create.disabled = false;
        }
        //alert(name);
    });
}

function errorMessage(name) {
    $("#login-message-error-area").text(name);
}





function addItemsToTable(items) {
    //Get the table body we we can add items to it
    var tableBody = document.getElementById("itemtablebody");
    //Remove all contents of the table body (if any exist)
    tableBody.innerHTML = "";

    //Loop through the items from the server
    for (var i = 0; i < items.length; i++) {
        (function (i) {
            var item = items[i];
            //Create a new line for this item
            var tr = document.createElement("tr");

            // ITEM NAME
            var nameCell = document.createElement("td");
            nameCell.textContent = item.itemName;
            tr.appendChild(nameCell);

            // ITEM PRICE
            var priceCell = document.createElement("td");
            priceCell.textContent = item.itemPrice;
            tr.appendChild(priceCell);

            //ITEM PRICE
            var htmlItemDescription = item.itemDescription;
            var htmlConverter = document.createElement("td");
            htmlConverter.innerHTML = htmlItemDescription;
            tr.appendChild(htmlConverter);

            // ITEM STOCK
            var itemStock = document.createElement("td");
            itemStock.textContent = item.itemStock;
            tr.appendChild(itemStock);

            // IN CART FIXME
            var itemsInCart = document.createElement("td");
            var inputField = document.createElement("span");
            inputField.className = "inputInCard";
            itemsInCart.appendChild(inputField);
            itemsInCart.className ="itemsInCart";
            tr.appendChild(itemsInCart);

            // ADD TO CART
            var addToCart = document.createElement("td");
            var addToCartButton = document.createElement("BUTTON");
            addToCartButton.className = "addItemButton";
            var buttonText = document.createTextNode("Add Item");
            addToCartButton.appendChild(buttonText);
            addToCart.appendChild(addToCartButton);
            tr.appendChild(addToCart);

            $(addToCartButton).click(function () {
                //FIXME
            });

            // ITEM ID
            var itemID = document.createElement("td");
            itemID.textContent = item.itemID;
            tr.appendChild(itemID);

            tableBody.appendChild(tr);
        })(i);
    }
}


function eow() {

    $('.minus-button').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest('div').find('input');
        var value = parseInt($input.val());
        var $getPrice = $this.closest('div').next('.price');
        var $totalPrice = $this.closest('div').closest('div').next(".total-price");
        var $prices = document.getElementsByClassName('.price');

        const $originalPrice = parseInt($getPrice.attr('name'));

        if (value >= 1) {
            value--;
        } else {
            value = 0;
        }

        var valueNumber = value*$originalPrice;
        var valueString = valueNumber + "kr.";

        $input.val(value);
        $getPrice.replaceWith("<div class='price' name='" + $originalPrice + "'>" + valueString + "</div>");



    });

    $('.plus-button').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest('div').find('input');
        var value = parseInt($input.val());
        var $getPrice = $this.closest('div').next('.price');
        var $originalPrice = parseInt($getPrice.attr('name'));

        if (value < 100) {
            value++;
        } else {
            value =100;
        }

        var valueNumber = value*$originalPrice;
        var valueString = valueNumber + "kr.";

        $input.val(value);
        $getPrice.replaceWith("<div class='price' name='" + $originalPrice + "'>" + valueString + "</div>");
    });

    $(".input").on("input", function () {


        var $this = $(this);
        var $input = $this;
        var value = parseInt($input.val());
        var $getPrice = $this.closest('div').next('.price');
        var $price = parseInt($getPrice.text());
        var $originalPrice = parseInt($getPrice.attr('name'));

        var valueNumber = value * $originalPrice;
        var valueString = valueNumber + "kr.";

        var c = parseFloat($input.val().replace(",","."));
        if(!isNaN(c)) {
            $input.val(c);
        } else {
            $input.val(0);
        }
        if($getPrice.text() !== "NaNkr.") {
            $input.val(value);
        }
        $getPrice.replaceWith("<div class='price' name='" + $originalPrice + "'>" + valueString + "</div>");
    });

}




/////////////////////////////////////////////////////
// Code from slides
/////////////////////////////////////////////////////

/**
 * A function that can add event listeners in any browser
 */
function addEventListener(myNode, eventType, myHandlerFunc) {
    if (myNode.addEventListener)
        myNode.addEventListener(eventType, myHandlerFunc, false);
    else
        myNode.attachEvent("on" + eventType,
            function (event) {
                myHandlerFunc.call(myNode, event);
            });
}

var http;
if (!XMLHttpRequest)
    http = new ActiveXObject("Microsoft.XMLHTTP");
else
    http = new XMLHttpRequest();

function sendRequest(httpMethod, url, body, responseHandler) {
    http.open(httpMethod, url);
    if (httpMethod == "POST") {
        http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            responseHandler(http.responseText);
        }
    };
    http.send(body);
}