const eventsListingApp = Vue.createApp({
    data() {
        return {
            search: '',
            brand: brandName,
            futures: events['future'],
            pasts: events['past'],
            tab: tabName,
            events_url: eventsUrl
        }
    },
    methods: {
        filterSearch(searchText) {
            this.search = searchText;
        }
    },
    computed: {
        filteredFuture() {
            let filtered = [];
            for(const event in this.futures) {
                if(this.futures[event].content.display_title.toLowerCase().includes(this.search.toLowerCase())) {
                    filtered.push(this.futures[event]);
                }
            }

            filtered.sort((objectA, objectB) => {
                let aStart = objectA.event_date, bStart = objectB.event_date;

                if(aStart == bStart) {
                    return 0; 
                } else if(aStart > bStart) {
                    return 1;
                } else if(aStart < bStart) {
                    return -1;
                }
            });

            return filtered;
        },
        filteredPast() {
            let filtered = [];
            for(const event in this.pasts) {
                if(this.pasts[event].content.display_title.toLowerCase().includes(this.search.toLowerCase())) {
                    filtered.push(this.pasts[event]);
                }
            }

            filtered.sort((objectA, objectB) => {
                let aStart = objectA.event_date, bStart = objectB.event_date;

                if(aStart == bStart) {
                    return 0; 
                } else if(aStart > bStart) {
                    return -1;
                } else if(aStart < bStart) {
                    return 1;
                }
            });

            return filtered;
        }
    }
});