market

function startApp() {
    $('header').find("a").show();
    function showView(view) {
        $('section').hide();
        switch (view) {
            case 'home':
                $('#viewAppHome').show();
                break;
            case 'login':
                $('#viewLogin').show();
                break;
            case 'register':
                $('#viewRegister').show();
                break;
            case 'userHome':
                $('#viewUserHome').show();
                break;
            case 'cart':
                $('#viewCart').show();
                showCart();
                break;
            case 'shop':
                $('#viewShop').show();
                loadAllProducts();
                break;
        }
    }

    $('#linkMenuAppHome').click(() => showView('home'));
    $('#linkMenuLogin').click(() => showView('login'));
    $('#linkMenuRegister').click(() => showView('register'));
    $('#linkMenuUserHome').click(() => showView('userHome'));
    $('#linkMenuShop').click(() => showView('shop'));
    $('#linkMenuCart').click(() => showView('cart'));
    $('#linkUserHomeShop').click(() => showView('shop'));
    $('#linkUserHomeCart').click(() => showView('cart'))
    $('#linkMenuLogout').click(logout);
    $('#formRegister').submit(register);
    $('#formLogin').submit(login);


    $(document).on({
        ajaxStart: () => $('#loadingBox').show(),
        ajaxStop: () => $('#loadingBox').fadeOut()
    });

    $('#infoBox').click((event) => $(event.target).hide());
    $('#errorBox').click((event) => $(event.target).hide());

    function showInfo(message) {
        $('#infoBox').text(message);
        $('#infoBox').show();
        setTimeout(() => $('#infoBox').fadeOut(), 3000);
    }

    function showError(message) {
        $('#errorBox').text(message);
        $('#errorBox').show();
    }

    function handleError(reason) {
        showError(reason.responseJSON.description);
    }

    function userLoggedIn() {
        $('header').find("a").show();
        $('#linkMenuRegister').hide();
        $('#linkMenuUserHome').show();
        $('#linkMenuLogin').hide();
        $('#linkMenuAppHome').hide();
        $('#spanMenuLoggedInUser').text(`Welcome, ${localStorage.getItem('username')}!!`);
        $('#spanMenuLoggedInUser').show();
        $('#viewUserHomeHeading').text(`Welcome, ${localStorage.getItem('username')}!!`);
        $('#viewUserHomeHeading').show();
        showView('userHome');
    }

    function userLoggedOut() {
        $('#spanMenuLoggedInUser').text('');
        $('#spanMenuLoggedInUser').hide();
        $('header').find("a").hide();
        $('#linkMenuAppHome').show();
        $('#linkMenuRegister').show();
        $('#linkMenuLogin').show();

    }

    function saveSession(data) {
        localStorage.setItem('username', data.username);
        localStorage.setItem('id', data._id);
        localStorage.setItem('name', data['name']);
        localStorage.setItem('authtoken', data._kmd.authtoken);
    }

    showView('home');
    let requester = (() => {

        const baseUrl = "https://baas.kinvey.com/";
        const appKey = "kid_Hk-uWafuW";
        const appSecret = "209f016b34104ba7be0d9dc5fe62b3f2";

        function makeAuth(type) {
            if (type === "basic") return "Basic " + btoa(appKey + ":" + appSecret);
            else  return 'Kinvey ' + localStorage.getItem('authtoken');
        }

        function makeRequest(method, module, url, auth) {

            return req = {
                url: baseUrl + module + "/" + appKey + '/' + url,
                method,
                headers: {
                    'Authorization': makeAuth(auth)
                }
            };
        }

        function get(module, url, auth) {
            return $.ajax(makeRequest("GET", module, url, auth));
        }

        function post(module, url, data, auth) {
            let req = makeRequest("POST", module, url, auth);
            req.data = JSON.stringify(data);
            req.headers['Content-Type'] = 'application/json';
            return $.ajax(req);
        }

        function update(module, url, data, auth) {
            let req = makeRequest("PUT", module, url, auth);
            req.data = data;
            return $.ajax(req);
        }

        function remove(module, url, data, auth) {
            return $.ajax(makeRequest("DELETE", module, url, auth));
        }

        return {get, post, update, remove}
    })();

    if (localStorage.getItem('authtoken') !== null && localStorage.getItem('username') !== null) {
        userLoggedIn();
    } else {
        userLoggedOut();
    }

    async function register(ev) {
        ev.preventDefault();
        let username = $('#registerUsername').val();
        let password =$('#registerPasswd').val();
        let name = $('#registerName').val();
        try {
            let data = await requester.post('user', '', {username, password, name}, "basic");
            saveSession(data);
            showInfo("Successfully register!! Please logIn");
            showView('login');
        } catch (err) {
            handleError(err);
        }
    }

    async function login(ev) {
        ev.preventDefault();
        let form = $('#formLogin');
        let username = $('#loginUsername').val();
        let password = $('#loginPasswd').val();

        try {
            let data = await requester.post('user', "login", {username, password}, "basic");
            saveSession(data);
            userLoggedIn();
            showInfo("Successfully login");
            showView('viewUserHome');
        } catch (err) {
            handleError(err);
        }
    }

    async function logout() {
        try {
            let data = await requester.post('user', '_logout', {authtoken: localStorage.getItem('authtoken')});
            localStorage.clear();
            showView("home");
            showInfo("Successfully logout!!");
            userLoggedOut();
        } catch (err) {
            handleError(err);
        }
    }

    async function loadAllProducts() {
        let data = await requester.get('appdata', 'products');
        if(data.length === 0){
            $('#shopProducts').append("<p>No products in database</p>");
            return;
        }
        for (let product of data) {
            $('#shopProducts>table>tbody').append($('<tr>')
                .append($('<td>').text(product.name))
                .append($('<td>').text(product.description))
                .append($('<td>').text(Math.ceil(product.price).toFixed(2)))
                .append($('<td>').append($('<button>').text('Purchase').click(() => {
                    purchaseItem(product);
                }))))
        }
    }
    function showCart() {
        try {
            requester.get('user', localStorage.getItem("id")).then(showCartSuccess);
        } catch (err) {
            handleError(err);
        }

        function showCartSuccess(user) {
            $('#cartProducts table tbody').empty();

            if(! user.cart){
                user.cart = {};
            }

            for(let productId of Object.keys(user.cart)){
                let discardLink = $('<button>').text('Discard').click(() => discardItem(user, productId));
                $('#cartProducts table tbody')
                    .append($('<tr>')
                        .append($('<td>').text(user.cart[productId].product.name))
                        .append($('<td>').text(user.cart[productId].product.description))
                        .append($('<td>').text(user.cart[productId].quantity))
                        .append($('<td>').text((Number(user.cart[productId].product.price) * Number(user.cart[productId].quantity)).toFixed(2)))
                        .append($('<td>').append(discardLink))
                    );
            }
        }
    }

    function purchaseItem(product) {
        try {
            requester.get('user', localStorage.getItem("id")).then(loadUserSuccess);
        } catch (err) {
            handleError(err);
        }

        function loadUserSuccess(user) {
            if(! user.cart){
                user.cart = {};
            }

            if(! user.cart[product._id]){
                user.cart[product._id] = {};
                user.cart[product._id].product = {};
                user.cart[product._id].product.name = product.name;
                user.cart[product._id].product.description = product.description;
                user.cart[product._id].product.price = product.price;
                user.cart[product._id].quantity = 1;
            } else {
                user.cart[product._id].quantity = Number(user.cart[product._id].quantity) + 1;
            }

            let userdata = user;

            try {
                requester.update('user', localStorage.getItem("id"), userdata).then(updateUserSuccess);
            } catch (err) {
                handleError(err);
            }

            function updateUserSuccess() {
                showView('cart');
                showInfo('Product purchased.')
            }
        }
    }

    function discardItem(productId, user){
      try {
           requester.update('user', localStorage.getItem("id"), user).then(updateUserSuccesss);
       } catch (err) {
           handleError(err);
       }

        function updateUserSuccesss() {
            showView('cart');
            showInfo('Product discarded.');
        }
    }
}