let pin = "";

$(document).ready(function () {
    FastClick.attach(document.body);
    setEvents();
});

function setEvents() {
    const heartEl = document.querySelector('body > h1 > span');
    refreshDeviceLabel()

    heartEl.addEventListener('click', function() {
        Swal.fire({
            title: 'Iniciar sesión',
            html:
                `<input id="device" class="swal2-input" type="text" placeholder="Dispositivo" value="${localStorage.getItem('device') ?? ''}">
                <input id="user" class="swal2-input" type="text" placeholder="Usuario" value="${localStorage.getItem('user') ?? ''}">
                <input id="pass" class="swal2-input" type="password" placeholder="Contraseña">`,
            confirmButtonText: 'Login',
            showCloseButton: true,
            showCancelButton: false,
        }).then(async (result) => {
            if(result.isConfirmed) {
                const user = $('#user').val();
                const pass = $('#pass').val();
                const device = $('#device').val();
                signIn(user, pass, device);
            }
        });
    }); 

    $(".btnnum").on("click", function () {
        pin += parseInt($(this).children().html());
        $("#txtPin").text(pin);
    });

    $(".btnCancel").on("click", function () {
        pin = "";
        $("#txtPin").text("ID USUARIO");
    });

    $(".btnOk").on("click", function () {
        if (pin) {
            login();
        };
    });
}

function login() {
    $.post({
        urlPath: 'WorkerTimeControls/login',
        jsonData: {pin},
        processData: false,
        success: function (data) {
            localStorage.setItem("userData", JSON.stringify(data));
            window.location = "clockIn.html";
        },
        error: function() {
            $("#txtPin").text("ID USUARIO");
            pin = "";
        }
    });
}

function signIn(user, password, device) {
    $.post({
        urlPath: 'vnUsers/sign-in',
        jsonData: {user, password},
        processData: false,
        success: function (data) {
            localStorage.setItem("token", data.token);
            localStorage.setItem("ttl", data.ttl);
            localStorage.setItem("user", user);
            localStorage.setItem("device", device);
            localStorage.setItem("created", Date.now());
            getTokenConfig();
            refreshDeviceLabel();
        },
    })
}

function refreshDeviceLabel() {
    $("#deviceLabel").text(localStorage.getItem('device') ?? '')
}