$(document).ready(() => {
    var $getToken       = $('#get-token');
    var $getCats        = $('#get-cats');
    var $tableCats      = $('#table-cats');
    var $tableCatsBody  = $('#table-cats__body');
    var token;

    function getToken() {
        $.ajax({
            method: 'POST',
            url: 'http://localhost:4000/token',
            data: {
                username: 'ollie',
                password: '123'
            }
        })
        .done((response) => {
            token = response.token;
        })
    }

    function listCats(index, cat) {
        var tableRow = '';

        tableRow += '<tr>';
        tableRow += '<td>' + cat.name + '</td>';
        tableRow += '<td>' + cat.age + '</td>';
        tableRow += '<td>' + cat.type + '</td>';
        tableRow += '<td>' + cat._id + '</td>';
        tableRow += '</tr>';

        $tableCatsBody.append(tableRow);
    }

    function getCats() {
        $.ajax({
            url: 'http://localhost:4000/cats',
            headers: {
                'Authorization': 'JWT ' + token
            }
        })
        .done((response) => {
            var cats = response.data;

            $tableCatsBody.empty();

            $.each(cats, listCats);

            $tableCats.removeClass('hidden');
        })
    }

    function bindEvents() {
        $getCats.on('click', getCats);
        $getToken.on('click', getToken);
    }

    bindEvents();
});