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",
                // eslint-disable-next-line no-undef
                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();

                // eslint-disable-next-line no-restricted-syntax
                for (const entry of entries) {
                    const [key, value] = entry;
                    switch (key) {
                        case "artists_sort":
                            this.artist = value;
                            break;
                        default:
                            this[key] = value;
                    }
                }

                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, 10) +
                            (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")}`;
                }

                window.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");
}