var App = Vue.createApp({
    data() {
        return {
            mediaList: [],
            mediaIndex: null
        }
    },
    methods: {
        EditMedium(mediaIndex, showModal = true)
        {
            this.mediaIndex = mediaIndex;

            if (showModal) {
                $('#addMediaModal').modal('show');
            }
        },
        CreateMedium()
        {
            this.mediaList.push({
                id: null,
                name: 'new medium',
                columns: 1,
                spacing: 0,
                width: 32
            })

            this.mediaIndex = this.mediaList.length - 1;

            $('#addMediaModal').modal('show');
        },
        async SaveMedium(mediaIndex)
        {
            if (this.mediaList[mediaIndex].id == null) {
                await LabelApi.POST('medium', {
                    name: this.mediaList[mediaIndex].name,
                    columns: this.mediaList[mediaIndex].columns,
                    spacing: this.mediaList[mediaIndex].spacing,
                    width: this.mediaList[mediaIndex].width
                });
            } else {
                await LabelApi.PUT('medium', {
                    mediumId: this.mediaList[mediaIndex].id,
                    name: this.mediaList[mediaIndex].name,
                    columns: this.mediaList[mediaIndex].columns,
                    spacing: this.mediaList[mediaIndex].spacing,
                    width: this.mediaList[mediaIndex].width
                });
            }
            $('#addMediaModal').modal('hide');
            await GetMediaList();
        },
        async DeleteMedium(mediaIndex, finaly = false)
        {
            if (finaly) {
                $('#deleteMediaModal').modal('hide');
                await LabelApi.DELETE('medium', {
                    mediumId: this.mediaList[mediaIndex].id
                });
                this.mediaIndex = null;
                await GetMediaList();
            } else {
                this.mediaIndex = mediaIndex;
                $('#deleteMediaModal').modal('show');
            }
        }
    }
}).mount('main');

async function GetMediaList()
{
    let mediaList = await LabelApi.GET(`media`);
    App.mediaList = mediaList;
}

GetMediaList();