var app = new Vue({
    el: '#app',
    data: {
        domain: { },
        errorMessage: '',
        staff: { reference: '' },
        department: '-',
        departments: {},
        started: false,
        ready: false,
        socket: null,
        savedDepartments: [],
        latestReportDate: new Date().toLocaleTimeString(),
        lastProfile: 'None',
        configuring: false
    },
    created: function () {
        this.socket = io();

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

        this.socket.on("config", (data) => {
            let deptStr = localStorage.getItem("idid-departments");
            if (deptStr) this.savedDepartments = JSON.parse(deptStr);
            data.departments.forEach(d => {
                d.name = d.name.replace('*', '');
                d.checked = this.savedDepartments.includes(d.id);
                return d;
            });
            this.domain = data;
            this.started = data.started;
            this.today = new Date().toDateString();
            this.records = data.records;
            this.ready = true;
        });

        //#region Verify handlers

        this.socket.on("fprint-verify-start-done", (data) => {
            console.log({ event: 'fprint-verify-start-done', data});
            this.started = true;
        });

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

        this.socket.on("fprint-verify-stop-done", (data) => {
            console.log({ event: 'fprint-verify-stop-done', data});
            this.started = false;
        });

        this.socket.on("fprint-verify-stop-error", (data) => {
            console.log({ event: 'fprint-verify-stop-error', data});
        });

        //#endregion

        //#region Identify handlers

        this.socket.on("fprint-identify-start-done", (data) => {
            console.log({ event: 'fprint-identify-start-done', data});
            this.started = true;
        });

        this.socket.on("fprint-identify-done", (data) => {
            console.log({ event: 'fprint-identify-done', data});
            if (data.ok)
                this.lastProfile = data.name;
            else
                this.lastProfile = "No Match";
            this.latestReportDate = new Date().toLocaleTimeString();
        });

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

        this.socket.on("fprint-identify-stop-done", (data) => {
            console.log({ event: 'fprint-identify-stop-done', data});
            this.started = false;
        });

        this.socket.on("fprint-identify-stop-error", (data) => {
            console.log({ event: 'fprint-identify-stop-error', data});
        });

        //#endregion
    },
    methods: {    
        toggleIdentifyMode: async function () {
            console.log("toggling clockin status ...");
            this.socket.emit(`fprint-identify-${this.started ?'stop' : 'start'}`, {
                departmentId: this.department
            });
        },

        toggleCheck: async function (d) {
            if (!d.checked) {
                let dpts = this.domain.departments.filter(q => q.checked);
                if (dpts.length == 10)
                    return alert("Maximum number of departments, 10, selected.");
            }
            d.checked = !d.checked;
        },

        saveDepartments() {
            let tmp = this.domain.departments.filter(q => q.checked).map(d => d.id);
            this.savedDepartments = tmp;
            localStorage.setItem("idid-departments", JSON.stringify(tmp));
            this.configuring = false;
        }
    }
})