var app = new Vue({
    el: '#app',
    data: {
        step: 0,
        phone: '',
        errorMessage: '',
        otp: '',
        busy: {
            login: false
        },
        user: {
            phone: '',
            username: '',
            roles: []
        },
        staff: {
            reference: ''
        },
        fingerDetails: {
            'right-thumb': { },
            'right-index-finger': { }
        },
        socket: null
    },
    created: function () {
        var userStr = localStorage.getItem("user");
        if (userStr) {
            this.user = JSON.parse(userStr);
            this.step = 1;
        }

        this.socket = io();

        this.socket.on("connect", () => { })

        this.socket.on("fprint-enroll-error", (data) => {
            console.log({ event: 'enroll-error', data });
            swal("Oops!", `Operation failed. ${data}.`, "error");
            this.busy.login = false;
        });

        this.socket.on("fprint-enroll-done", (data) => {
            console.log({ event: 'enroll-done', data});
            if (data.ok) {
                let { id, fingerprint, data: { finger }} = data;
                this.step = 1.2;
                this.fingerDetails[finger] = { id, fingerprint, finger }
            }
            this.busy.login = false;
        })

        this.socket.on("fprint-verify-done", (data) => {
            console.log({ event: 'verify-done', data});
        });
    },
    methods: {
        authenticateUrl: function (api, authenticate = true) {
            return `https://apis.a2loft.net/identity${api}` + (authenticate ? `?phone=${this.user.phone}&otp=${this.otp}` : '');
        },
        login: async function () {
            this.busy.login = true;
            var { data } = await axios.get(
                this.authenticateUrl(`/validate/uc/${this.phone}/${this.otp}`, false)
            );
            this.errorMessage = '';
            if (!data.ok)
                this.errorMessage = "Invalid OTP specified.";
            else {
                localStorage.setItem("user", JSON.stringify(data.data));
                this.user = data.data;
                this.step = 1.0;
            }
            this.busy.login = false;
        },
        logout: function () {
            localStorage.removeItem("user");
            this.step = 0;
        },
        loadUserByReference: async function () {
            this.busy.login = true;
            try {
                var { data } = await axios.get(
                    this.authenticateUrl(`/uc/${this.staff.reference}`)
                );
                if (!data.ok) {
                    swal("Oops!", `Operation failed. ${data.message}.` + this.staff.reference, "error");
                } else {
                    this.staff = data.data;
                    // this.staff.verified = false;
                    this.step = 1.1;
                }
            } finally {
                this.busy.login = false;
            }
        },
        captureFingerPrint: async function (finger) {
            this.busy.login = true;
            this.step = 1.1;
            // var { data: { success, message: { id, data, fingerprint } } } = await axios.post("http://localhost:9000/api/user", {
            //     name: this.staff.reference
            // });
            // this.fingerDetails = { id, fingerprint };
            // var { data } = await axios.delete(`http://localhost:9000/api/user/${id}`);
            // console.log(`${id} purged.`);
            this.socket.emit("fprint-enroll", { finger });
        },
        saveFingerPrint: async function () {
            this.busy.login = true;
            try {
                var fingerprints = Object.keys(this.fingerDetails).map(finger => {
                    return {
                        finger,
                        fingerprint: this.fingerDetails[finger].fingerprint
                    }
                });
                var { data } = await axios.post(
                    this.authenticateUrl(`/uc/fingerprints/${this.staff.reference}`),
                    { fingerprints }
                );
                
                if (data.ok) {
                    swal("Saved", `Fingerprint saved for ${this.staff.name} with reference ${this.staff.reference}.`, "success");
                    this.newEnrolment();
                } else {
                    swal("Oops!", `Operation failed. ${data.message}.` + this.staff.reference, "error");
                }
            } finally {
                this.busy.login = false;
            }
        },
        newEnrolment: function () {
            this.step = 1.0;
            this.staff.reference = "";    
        }
    }
})