var App = Vue.createApp({
    data() {
        return {
            // LabelEditor: {
            //     ...LabelData
            // },
            template,
            variableIndex: null,
            elementIndex: null
        }
    },
    methods: {
        async SaveTemplate() {
            await LabelApi.PUT('template', {
                templateId: this.template.id,
                name: this.template.name,
                width: this.template.width,
                height: this.template.height
            });

            let toast = bootstrap.Toast.getOrCreateInstance(toastTemplateSaved)
            toast.show()

            await GetLabelData();
        },
        async AddVariable() {
            this.template.variables.push({
                id: null,
                name: 'new variable',
                label: 'unknown variable',
                regex: '^.*$',
                example: '',
                default: ''
            });

            this.variableIndex = this.template.variables.length - 1;

            $('#VariableSettingsModal').modal('show');
        },
        async EditVariable(Index) {
            this.variableIndex = Index;
            $('#VariableSettingsModal').modal('show');
        },
        async SaveVariable(Index) {
            if (this.template.variables[Index].id == null) {
                await LabelApi.POST('variable', {
                    templateId: this.template.id,
                    name: this.template.variables[Index].name,
                    label: this.template.variables[Index].label,
                    regex: this.template.variables[Index].regex,
                    example: this.template.variables[Index].example,
                    default: this.template.variables[Index].default
                });
            } else {
                await LabelApi.PUT('variable', {
                    variableId: this.template.variables[Index].id,
                    name: this.template.variables[Index].name,
                    label: this.template.variables[Index].label,
                    regex: this.template.variables[Index].regex,
                    example: this.template.variables[Index].example,
                    default: this.template.variables[Index].default
                });
            }
            $('#VariableSettingsModal').modal('hide');
            await GetLabelData();
        },
        async DeleteVariable(Index, finaly = false) {
            if (finaly) {
                $('#DeleteVariableModal').modal('hide');
                await LabelApi.DELETE('variable', {
                    variableId: this.template.variables[Index].id
                });
                this.variableIndex = null;
                await GetLabelData();
            } else {
                this.variableIndex = Index;
                $('#DeleteVariableModal').modal('show');
            }
        },
        async AddElement(ElementType) {
            let elementConfig = {};

            if (ElementType == 'text') {
                elementConfig = {
                    ...elementConfig,
                    fontType: '0',
                    fontHeight: 10,
                    content: '<%- VarName %> or Plain Text'
                }
            }

            if (ElementType == 'box') {
                elementConfig = {
                    ...elementConfig,
                    width: 20,
                    height: 10,
                    borderWidth: 1,
                    borderColor: 'B',
                    borderRadius: 0
                }
            }

            if (ElementType == 'ellipse') {
                elementConfig = {
                    ...elementConfig,
                    width: 20,
                    height: 10,
                    borderWidth: 1,
                    borderColor: 'B'
                }
            }

            if (ElementType == 'code39') {
                elementConfig = {
                    ...elementConfig,
                    codeHeight: 30,
                    codeWidth: 2,
                    widthRatio: 3.0,
                    content: '<%- VarName %> or Plain Text'
                }
            }

            if (ElementType == 'code128') {
                elementConfig = {
                    ...elementConfig,
                    codeHeight: 30,
                    codeWidth: 2,
                    widthRatio: 3.0,
                    content: '<%- VarName %> or Plain Text'
                }
            }

            this.template.elements.push({
                name: 'new ' + ElementType,
                type: ElementType,
                config: {
                    originX: 0,
                    originY: 0,
                    originAlign: 0,
                    ...elementConfig
                }
            });

            this.elementIndex = this.template.elements.length - 1;

            $('#ElementSettingsModal').modal('show');
        },
        async EditElement(Index) {
            this.elementIndex = Index;
            $('#ElementSettingsModal').modal('show');
        },
        async SaveElement(Index) {
            if (this.template.elements[Index].id == null) {
                await LabelApi.POST('element', {
                    templateId: this.template.id,
                    name: this.template.elements[Index].name,
                    type: this.template.elements[Index].type,
                    config: this.template.elements[Index].config,
                    comment: this.template.elements[Index].comment
                });
            } else {
                await LabelApi.PUT('element', {
                    elementId: this.template.elements[Index].id,
                    name: this.template.elements[Index].name,
                    type: this.template.elements[Index].type,
                    config: this.template.elements[Index].config,
                    comment: this.template.elements[Index].comment
                });
            }
            $('#ElementSettingsModal').modal('hide');
            await GetLabelData();
        },
        async DeleteElement(Index, finaly = false) {
            if (finaly) {
                $('#DeleteElementModal').modal('hide');
                await LabelApi.DELETE('element', {
                    elementId: this.template.elements[Index].id
                });
                this.elementIndex = null;
                await GetLabelData();
            } else {
                this.elementIndex = Index;
                $('#DeleteElementModal').modal('show');
            }
        },
        GetElementTypeName(ElementType) {
            switch (ElementType) {
                case 'text':
                    return 'Text';
                    break;
                case 'box':
                    return 'Graphical Box';
                    break;
                case 'ellipse':
                    return 'Graphical Ellipse';
                    break;
                case 'code39':
                    return 'Code 39';
                    break;
                case 'code128':
                    return 'Code 128';
                    break;
                default:
                    return 'Unknown';
                    break;
            }
        }
    }
}).mount('main');


async function GetLabelData() {
    App.variableIndex = null;
    App.elementIndex = null;

    let template = await LabelApi.GET(`template/${App.template.id}`);
    App.template = template;
}


const toastTemplateSaved = document.getElementById('toast-template-saved')