var queueApp = Vue.createApp({
    data() {
        return {
            queueData,
            templates,
            printers,
            // SelectedPrinter: null,
            LabelData: {
                Auftragsnummer: null,
                Bezeichnung: null
            },
            LabelQueue: [],
            Settings: {
                AutoPrint: false
            },
            CurrentTemplate: templates[0].id
        }
    },
    methods: {
        ContinueFieldInput()
        {
            console.log("ContinueFieldInput");
            let Fields = Object.entries(this.LabelData).map((Field) => {
                return {
                    Key: Field[0],
                    Value: Field[1]
                };
            });

            Fields = Fields.filter((Field) => {
                return Field.Value == null || Field.Value == "";
            });

            if (Fields.length > 0) {
                $(`input[placeholder='${Fields[0].Key}']`).focus();
            } else {
                this.SaveLabelData()
            }
        },
        SaveLabelData()
        {
            this.LabelQueue.push({
                Fields: {
                    ...this.LabelData
                }
            });

            Object.keys(this.LabelData).forEach((FieldName) => {
                this.LabelData[FieldName] = null;
            });

            $(`input[placeholder='${Object.keys(this.LabelData)[0]}']`).focus();

            this.SavePersistent();
        },
        DeleteLabel(LabelIndex) {
            console.log(LabelIndex);
            this.LabelQueue.splice(LabelIndex, 1);
            this.SavePersistent();
        },
        SavePersistent()
        {
            localStorage.setItem('LabelQueue', JSON.stringify(this.LabelQueue));
            localStorage.setItem('Settings', JSON.stringify(this.Settings));
        },
        LoadPersistent()
        {
            if (localStorage.getItem('LabelQueue') != null) {
                this.LabelQueue = JSON.parse(localStorage.getItem('LabelQueue'));
            }

            if (localStorage.getItem('Settings') != null) {
                this.Settings = {
                    ...this.Settings,
                    ...JSON.parse(localStorage.getItem('Settings'))
                }
            }
        },
        // Settings
        ToggleAutoPrint() {
            this.Settings.AutoPrint = !this.Settings.AutoPrint;
            this.SavePersistent();
        }
    }
}).mount('main');


queueApp.LoadPersistent();


async function GetTemplateList() {
    let templates = await LabelApi.GET('templates');
    queueApp.templates = templates;
}

async function GetPrinterList() {
    let printers = await LabelApi.GET('printers');
    queueApp.printers = printers;
}

async function GetQueueSettings() {
    let queueData = await LabelApi.GET('queue/' + queueApp.queueData.id);
    queueApp.queueData = queueData;
}


function GetSelectedPrinter() {
    if (localStorage.getItem('SelectedPrinter') == null) {
        SetSelectedPrinter([])
    }

    queueApp.SelectedPrinter = JSON.parse(
        localStorage.getItem('SelectedPrinter')
    );
}

function SetSelectedPrinter(SelectedPrinter) {
    localStorage.setItem('SelectedPrinter', JSON.stringify(SelectedPrinter));
}


function GetLabelQueue() {
    if (localStorage.getItem('LabelQueue') == null) {
        SetLabelQueue([])
    }

    queueApp.LabelQueue = JSON.parse(
        localStorage.getItem('LabelQueue')
    );
}

function SetLabelQueue(LabelQueue) {
    localStorage.setItem('LabelQueue', JSON.stringify(LabelQueue));
}

GetPrinterList();
GetLabelQueue();