<template>
    <div class="o-filters" data-kal="slide-right">
        <h2 class="o-filters__heading">Filters</h2>

        <div class="o-filters__body  js-filters-body">

            <div class="o-filters__section" v-for="filter in filters">

                <h3 class="o-filters__subheading">{{ filter.name }}</h3>
                <a v-if="filter.key == 'levels'" class="o-filters__level-explanations" target="_blank" href="/files/levels_explained.pdf">
                  <span class="o-filters__explanations-title">{{ __('how_does_it_work')}}</span>
                  <img class="o-filters__explanations-icon" alt="explanation icon" src="/img/info.svg" width="18" height="18"/>
                </a>
              <div class="o-filters__content">
                <component v-on:updateFilters="updateFilters" v-bind:is="'filter-type-' + filter.type" :filter="filter">
                    <template slot="pin-icon">
                        <slot name="pin-icon"></slot>
                    </template>
                </component>
              </div>

            </div>

        </div>

    </div>
</template>

<script>

    export default {
        name: "trainingFilters",

        data: () => ({
            filters: [],
        }),

        methods: {

            updateFilters() {

                let activeFilters = {};

                this.filters.forEach((filter) => {

                    switch (filter.type) {
                        case "select":
                            if(filter.value === 0) return;
                            activeFilters[filter.key] = filter.value;
                            return;

                        case "levels":
                        case "checkboxes":
                            if(filter.selectedOptions.length === 0) return;
                            activeFilters[filter.key] = filter.selectedOptions;
                            return;

                        default:
                            debugger;
                            return;
                    }
                });

                window.sessionStorage.setItem('trainingFilters', JSON.stringify(activeFilters));
                this.$emit('loadTrainingsTunnel');
            },
        },

        mounted () {
            const self = this;

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

            axios.get('/api/trainings/filters')
                .then(function (response) {
                    self.filters = response.data;

                    let trainingFilters = window.sessionStorage.getItem('trainingFilters');

                    if(trainingFilters === null) return;
                    trainingFilters = JSON.parse(trainingFilters);

                    for(let i = 0; i < self.filters.length; i++) {
                        const filter = self.filters[i];
                        if(!(filter.key in trainingFilters)) continue;

                        const storedFilterValue = trainingFilters[filter.key];

                        switch (filter.type) {
                            case "select":
                                filter.value = storedFilterValue
                                break;

                            case "levels":
                            case "checkboxes":
                                filter.selectedOptions = storedFilterValue;
                                break;
                        }
                    }
                });
        }
    }
</script>