if ( typeof userId !== 'undefined' ) {
    Vue.createApp({
        data() {
            return {
                loading: false,
                moreFilters: false,
                items: [],
                total: 0,
                page: 1,
                totalPages: 1,
                limit: 16,
                artist: '',
                format: '',
                year: '',
                genre: '',
                style: '',
                sortOrder: 'artists_sort-asc',
                sort: 'artists_sort',
                order: 'asc',
                userId,
            }
        },
        created() {
            this.fetch();
        },
        methods: {
            fetch() {
                this.loading = true;
                this.total = 0;

                const queryString = window.location.search;
                const urlParams = new URLSearchParams(queryString);
                const entries = urlParams.entries();

                for(const entry of entries) {
                    switch(entry[0]) {
                        case 'artists_sort':
                            this.artist = entry[1];
                            break;
                        default:
                            this[entry[0]] = entry[1];
                    }
                }

                let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
                if ( this.artist ) {
                    url += `&artists_sort=${this.artist.replace('&', '%26')}`;
                }
                if ( this.format ) {
                    url += `&format=${this.format.replace('&', '%26')}`;
                }
                if ( this.year ) {
                    url += `&year=${this.year}`;
                }
                if ( this.genre ) {
                    url += `&genre=${this.genre.replace('&', '%26')}`;
                }
                if ( this.style ) {
                    url += `&style=${this.style.replace('&', '%26')}`;
                }

                axios.get(url)
                    .then( response => {
                        this.items = response.data.rows;
                        this.total = response.data.count || 0;
                        this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);

                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Impossible de charger cette collection");
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            changeUrl() {
                let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
                if ( this.artist ) {
                    url += `&artists_sort=${this.artist.replace('&', '%26')}`;
                }
                if ( this.format ) {
                    url += `&format=${this.format.replace('&', '%26')}`;
                }
                if ( this.year ) {
                    url += `&year=${this.year}`;
                }
                if ( this.genre ) {
                    url += `&genre=${this.genre.replace('&', '%26')}`;
                }
                if ( this.style ) {
                    url += `&style=${this.style.replace('&', '%26')}`;
                }

                location.href = url;
            },
            next(event) {
                event.preventDefault();

                this.page += 1;

                this.changeUrl();
            },
            previous(event) {
                event.preventDefault();

                this.page -= 1;

                this.changeUrl();
            },
            goTo(page) {
                this.page = page;

                this.changeUrl();
            },
            changeSort() {
                const [sort,order] = this.sortOrder.split('-');
                this.sort = sort;
                this.order = order;
                this.page = 1;

                this.changeUrl();
            },
            changeFilter() {
                this.page = 1;

                this.changeUrl();
            },
            showMoreFilters() {
                this.moreFilters = !this.moreFilters;
            }
        }
    }).mount('#collection-publique');
}