import Vue from 'vue';
import './components'

Vue.mixin(require('./translator'));

// save our state (isPanel open or not)
export const store = Vue.observable({
    isFiltersBarActive: false
});

// We call toggleNav anywhere we need it in our app
export const mutations = {
    toggleFiltersBar() {
        store.isFiltersBarActive = !store.isFiltersBarActive
    }
};

const trainingApp = document.getElementById('trainingApp');
if(isset(trainingApp)) {

    const vueApp = new Vue({
        el: '#trainingApp',
        data: () => ({
            isLoading: true,
            hasMorePages: false,
            currentPage: 1,
            filters: [],
            upcomingTrainings: [],
            activeLanguage: trainingApp.getAttribute('data-language-id')
        }),

        mounted () {
            this.loadTrainings();
        },

        methods: {

            loadTrainings(reset = true) {

                const self = this;
                if(reset) {
                    this.upcomingTrainings = [];
                    this.isLoading = true;
                    this.currentPage = 1;
                }

                let parameters = { page: this.currentPage };

                const trainingFilters = window.sessionStorage.getItem('trainingFilters');
                if(trainingFilters !== '{}' && trainingFilters !== null) Object.assign(parameters, JSON.parse(trainingFilters));

                // const apiPath = '/api/trainings';
                const apiPath = 'http://ste.komma.pro/api/trainings';

                axios.get(apiPath, {
                        params: parameters
                    })
                    .then(function (response) {
                        self.upcomingTrainings = self.upcomingTrainings.concat(Object.values(response.data.items));
                        self.hasMorePages = response.data.more_page;
                        self.isLoading = false;
                    });
            },

            loadMoreTrainings() {
                this.currentPage = this.currentPage + 1;
                this.loadTrainings(false);
            }
        },
        computed: {
            isFiltersActive() {
                return store.isFiltersBarActive
            }
        }
    });
}