<template>
    <div>
        <div class="row">
            <div class="col-8 offset-2">
                <OfferNavbarContainer
                    :data="offerNavbarData"
                    @click="onNavbarClick"
                />
            </div>
        </div>
        <div class="row">
            <div class="col-8 offset-2">
                <div v-if="showLoading">
                    Loading...
                </div>
                <LottoGrid
                    v-if="isLotto"
                    :events="events"
                />
                <OfferGrid
                    v-if="isOffer"
                    :groupedEvents="events"
                    :detailedEvent="detailedEvent"
                    :allowDetails="allowDetails"
                    @click="onDetailsClick"
                />
            </div>
            <div class="col-2">
                <div class="row">
                    <FilterContainer/>
                </div>
                <div class="row">
                    <DatePickerContainer
                        :dates="dates"
                        :selectedDate="selectedDate"
                        @dateClick="onDateClick"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex';
    import DatePickerContainer from '@modules/results/datePicker/DatePickerContainer.vue';
    import FilterContainer from '@modules/results/filter/FilterContainer.vue';
    import OfferNavbarContainer from '@modules/results/offerNavbar/OfferNavbarContainer.vue';
    import LottoGrid from '@modules/results/lottoGrid/LottoGrid.vue';
    import OfferGrid from '@modules/results/offerGrid/OfferGrid.vue';
    import DateUtils from '@core/utils/date/DateUtils';
    import LottoProvider from '@store/modules/results/resultsProviders/LottoProvider';
    import PrematchProvider from '@store/modules/results/resultsProviders/PrematchProvider';
    import LiveProvider from '@store/modules/results/resultsProviders/LiveProvider';
    import LottoGeneralFilter from '@store/modules/ui/results/filters/LottoGeneralFilter';
    import LottoSpecificFilter from '@store/modules/ui/results/filters/LottoSpecificFilter';
    import { DataType } from '@store/modules/ui/results/resultsIndex';
    import OfferGeneralFilter from '@store/modules/ui/results/filters/OfferGeneralFilter';
    import OfferSpecificFilter from '@store/modules/ui/results/filters/OfferSpecificFilter';
    import config from '@config';

    export default {
        name: 'ResultsContainer',
        async created() {
            const selectedResults = this.offerNavbarData.filter((item) => item.isSelected)[0];
            const { startDate, endDate } = this.dates[this.dates.length - 1 - this.dateOffset];
            this.setProvider(selectedResults.payload.provider);
            this.setProviderTimeSpan({ startDate, endDate });
            await this.fetchEventResults();
            this.selectDataType(selectedResults.payload.dataType);
            this.setFilters(selectedResults.payload.filters);
        },
        computed: {
            ...mapGetters('results', [
                'events',
                'dataType',
            ]),
            ...mapGetters([
                'resultsTimeSpan',
                'detailedEvent',
                'route',
            ]),
            dates() {
                const dateArray = DateUtils.getDatesArray(config.app.results.maxDaysToFetch);
                const displayedDates = [];
                for (let i = 0; i < dateArray.length - 1; i += 1) {
                    displayedDates.push({
                        startDate: dateArray[i],
                        endDate: dateArray[i + 1],
                        offset: dateArray.length - i - 1,
                    });
                }
                displayedDates.push({
                    startDate: dateArray[dateArray.length - 1],
                    endDate: new Date(),
                    offset: 0,
                });
                return displayedDates;
            },
            selectedDate() {
                return DateUtils.subtractDays(0, this.resultsTimeSpan.startDate);
            },
            showLoading() {
                return !this.events;
            },
            isLotto() {
                return this.dataType === DataType.lotto;
            },
            isOffer() {
                return this.dataType === DataType.prematch || this.dataType === DataType.live;
            },
            allowDetails() {
                return this.dataType === DataType.prematch;
            },
            selectedResultsType() {
                return this.route.params.offerTypeSlug;
            },
            dateOffset() {
                return this.route.query.offset ? this.route.query.offset : 0;
            },
            offerNavbarData() {
                const endDate = new Date();
                const startDate = DateUtils.subtractDays(1);
                return [
                    {
                        payload: {
                            provider: new PrematchProvider(startDate, endDate),
                            filters: [
                                new OfferGeneralFilter(this.$t('All games')),
                                new OfferSpecificFilter(this.$t('All types')),
                            ],
                            dataType: DataType.prematch,
                        },
                        isSelected: this.selectedResultsType === this.$t('sport'),
                        name: this.$t('sport'),
                    },
                    {
                        payload: {
                            provider: new LiveProvider(startDate, endDate),
                            filters: [
                                new OfferGeneralFilter(this.$t('All games')),
                                new OfferSpecificFilter(this.$t('All types')),
                            ],
                            dataType: DataType.live,
                        },
                        isSelected: this.selectedResultsType === this.$t('live'),
                        name: this.$t('live'),
                    },
                    {
                        payload: {
                            provider: new LottoProvider(startDate, endDate),
                            filters: [
                                new LottoGeneralFilter(this.$t('All games')),
                                new LottoSpecificFilter(this.$t('All types')),
                            ],
                            dataType: DataType.lotto,
                        },
                        isSelected: this.selectedResultsType === this.$t('lotto'),
                        name: this.$t('lotto'),
                    }
                ];
            }
        },
        methods: {
            ...mapActions([
                'setProvider',
                'setProviderTimeSpan',
                'fetchEventResults',
                'removeEventResults',
                'selectDetailedEvent',
                'removeDetailedEvent',
            ]),
            ...mapActions('results', [
                'setFilters',
                'resetGeneralFilter',
                'resetSpecificFilter',
                'selectDataType',
                'removeFilters',
            ]),
            onDateClick(date) {
                this.setProviderTimeSpan({ startDate: date.startDate, endDate: date.endDate });
                this.resetGeneralFilter();
                this.resetSpecificFilter();
                this.removeDetailedEvent();
                this.fetchEventResults();
                this.$router.push({
                    path: this.route.path,
                    query: {
                        offset: date.offset
                    }
                });
            },
            onNavbarClick(item) {
                this.resetSpecificFilter();
                this.resetGeneralFilter();
                this.removeDetailedEvent();
                this.setProvider(item.payload.provider);
                this.removeFilters();
                this.removeEventResults();
                this.selectDataType(item.payload.dataType);
                this.fetchEventResults();
                this.setFilters(item.payload.filters);
                this.$router.push(item.name);
            },
            onDetailsClick(event) {
                this.selectDetailedEvent(event.id);
            }
        },
        components: {
            FilterContainer,
            DatePickerContainer,
            OfferNavbarContainer,
            LottoGrid,
            OfferGrid,
        }
    };
</script>