/*
 * cass_register_shortcode_member_courses_list_subscribed - - Shortcode for member courses list subscribed
 *
 * This shortcode is used to display the member courses list subscribed
 */

document.addEventListener('DOMContentLoaded', function () {
    var loader = document.getElementById('cass_member_crouses_list_subscribed');
    if (loader) {
        new Vue({
            el: "#cass_member_crouses_list_subscribed",
            data: {
                search: '',
                limitCourse: true,
                races: [],
                cancelCourseVisible: false,
                infoCourseVisible: false,
                cancelCourseName: "",
                infoCourseName: "",
                raceUnique: {},
            },
            methods: {
                isRaceInProgress(start) {
                    const currentTime = new Date().getTime();
                    const raceStartTime = new Date(start).getTime();
                    return currentTime < raceStartTime;
                },
                getStateText(state) {
                    const raceUserState = parseInt(state, 10);

                    switch (raceUserState) {
                        case 1:
                            return 'Inscrit';
                        case 2:
                            return 'Validée';
                        case 3:
                            return 'Désinscrit';
                        case 4:
                            return 'Excusée';
                    }


                },
                loadInfoCourse(race){
                    window.location.href = siteUrl+"/infocourse/?id="+race.IDRace+"&returnUrl="+window.location.href;                 
                },


                fetchRaceData() {
                    const adminUrl = window.adminPostUrl;
                    const siteUrl = window.siteUrl;
                    const userID = window.userID;

                    const apiURL = `${siteUrl}/wp-json/wp-cass/v1/cass-shortcode-member-course-list/${userID}`;

                    let isMobile = window.matchMedia("(pointer:coarse)").matches;

                    axios.get(apiURL)
                        .then(response => {
                            this.races = response.data;
                            if (this.races.length == 0) {
                                document.getElementById('shortcodeTitleEmpty').removeAttribute('hidden');
                                document.getElementById('member-courses-list').setAttribute('hidden', "true");
                                document.getElementById('member-courses-list-mobile').setAttribute('hidden', "true");
                            } else {
                                if (isMobile) {
                                    document.getElementById('member-courses-list-mobile').removeAttribute('hidden');
                                    document.getElementById('shortcodeTitleEmpty').setAttribute('hidden', "true");
                                    document.getElementById('member-courses-list').setAttribute('hidden', "true");
                                } else {
                                    document.getElementById('member-courses-list').removeAttribute('hidden');
                                    document.getElementById('shortcodeTitleEmpty').setAttribute('hidden', "true");
                                    document.getElementById('member-courses-list-mobile').setAttribute('hidden', "true");
                                }
                            }

                            document.getElementById('progress-bar-container').setAttribute('hidden', "true");
                        })
                        .catch(error => {
                            console.error(error);
                        });


                },

            },
            created() {
                this.fetchRaceData();
            },
            computed: {
                filteredRaces() {
                    let races = this.races;

                    if (this.limitCourse) {
                        races = races.slice(0, 25);
                    }

                    let filtered = races.filter(race => race.name.toLowerCase().includes(this.search.toLowerCase()));

                    return filtered;
                },

            },
        });
    }
});
