import Vue from 'vue'

export default new Vue({
    data: function () {
        return {
            endpoint: '/admin/fr/builder/api/brick',
            client: {},
        };
    },
    methods: {
        replaceUrlParameters(pattern, replaceData) {
            var re = /\{([^\}]+)?\}/g, match;

            while (match = re.exec(pattern)) {
                pattern = pattern.replace(match[0], replaceData[match[1]])
                re.lastIndex = 0;
            }

            return pattern;
        },
        _fetch(url, options) {
            options = extend({
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
            }, options);

            var f = fetch(url, options);
            if (options.headers.Accept === 'application/json') {
                f = f.then(function (response) {
                    return response.json();
                });
            }

            f.catch((err) => {
                console.error(err);
            })

            return f;
        },
        post(url, data) {
            var opts = {method: 'POST', headers: {'Accept': 'application/json',},};
            if (data instanceof FormData) {
                opts.body = data;
            } else {
                var formData = new FormData();
                Object.keys(data).forEach(function (key) {
                    formData.append(key, data[key]);
                });
                opts.body = formData;
            }

            return this._fetch(this.endpoint + url, opts);
        },
        get(url) {
            var opts = {method: 'GET', headers: {'Accept': 'application/json',},};

            return this._fetch(this.endpoint + url, opts);
        },
        delete(url) {
            var opts = {method: 'DELETE', headers: {'Accept': 'application/json',},};

            return this._fetch(this.endpoint + url, opts);
        },
        // Actions
        addBrick(parentBrickId, brickType, layout) {
            var data = {
                parentBrickId: parentBrickId,
                brickType: brickType,
                layout: layout,
            };
            var url = this.replaceUrlParameters('/create', data)

            return this.post(url, data);
        },
        deleteBrick(brickId) {
            var url = this.replaceUrlParameters('/{brickId}/delete', {brickId: brickId});
            return this.delete(url);
        },
        updateBrickForm(brickId) {
            var url = this.replaceUrlParameters('/{brickId}/update', {brickId: brickId});
            return this.get(url);
        },
        updateBrick(brickId, data) {
            var url = this.replaceUrlParameters('/{brickId}/update', {brickId: brickId});
            return this.post(url, data);
        },
        duplicateBrick(brickId, options= []) {
            var url = this.replaceUrlParameters('/{brickId}/duplicate', {brickId: brickId});

            if (options.length > 0) {
                var params = [];
                options.forEach((option) => {
                    params.push(option.key + '=' + option.value);
                });
                url += '?' + params.join('&');
            }

            return this.get(url);
        },
        dragBrick(brickId, parentBrickId, eventType, index) {
            var url = this.replaceUrlParameters('/{brickId}/sort', {brickId: brickId});
            var data = {
                brickId: brickId,
                parentBrickId: parentBrickId,
                eventType: eventType,
                index: index,
            };
            return this.post(url, data);
        },
        templateBrick(brickId, data) {
            var url = this.replaceUrlParameters('/{brickId}/template', {brickId: brickId});
            return this.post(url, data);
        },
        getLayouts() {
            return this.get('/layout');
        },
        updateLayoutBrick(brickId, data) {
            var url = this.replaceUrlParameters('/{brickId}/layout', {brickId: brickId});
            return this.post(url, data);
        }
    },
})
