if ( typeof item !== 'undefined' ) {
    Vue.createApp({
        data() {
            return {
                item,
                tracklist: [],
                identifiers: [],
                modalIsVisible: false,
                identifiersMode: 'preview',
                identifiersPreviewLength: 16,
                preview: null,
                index: null,
                showModalDelete: false,
            }
        },
        created() {
            this.setTrackList();
            this.setIdentifiers();

            window.addEventListener("keydown", this.changeImage);
        },
        destroyed() {
            window.removeEventListener('keydown', this.changeImage);
        },
        methods: {
            setIdentifiers() {
                this.identifiers = [];

                let max = this.identifiersMode == 'preview' && this.item.identifiers.length > this.identifiersPreviewLength ? this.identifiersPreviewLength : this.item.identifiers.length;

                for ( let i = 0 ; i < max ; i += 1 ) {
                    this.identifiers.push(this.item.identifiers[i]);
                }
            },
            setTrackList() {
                let subTrack = {
                type: null,
                title: null,
                tracks: [],
            };
            for (let i = 0 ; i < this.item.tracklist.length ; i += 1 ) {
                const {
                    type_,
                    title,
                    position,
                    duration,
                    extraartists,
                } = this.item.tracklist[i];

                if ( type_ === 'heading' ) {
                    if ( subTrack.type ) {
                        this.tracklist.push(subTrack);
                        subTrack = {
                            type: null,
                            title: null,
                            tracks: [],
                        };
                    }

                    subTrack.type = type_;
                    subTrack.title = title;
                } else {
                    subTrack.tracks.push({
                        title,
                        position,
                        duration,
                        extraartists
                    });
                }
            }
            this.tracklist.push(subTrack);
            },
            setImage() {
                this.preview = this.item.images[this.index].uri;
            },
            showGallery(event) {
                const item = event.target.tagName === 'IMG' ? event.target.parentElement : event.target;

                const {
                    index,
                } = item.dataset;

                this.index = Number(index);
                this.modalIsVisible = true;

                this.setImage();
            },
            toggleModal() {
                this.modalIsVisible = !this.modalIsVisible;
            },
            previous() {
                this.index = this.index > 0 ? this.index - 1 : this.item.images.length -1;
                this.setImage();
            },
            next() {
                this.index = (this.index +1) === this.item.images.length ? 0 : this.index + 1;
                this.setImage();
            },
            changeImage(event) {
                const direction = event.code;

                if ( this.modalIsVisible && ['ArrowRight', 'ArrowLeft', 'Escape'].indexOf(direction) !== -1 ) {
                    switch (direction) {
                        case 'ArrowRight':
                            return this.next();
                        case 'ArrowLeft':
                            return this.previous();
                        default:
                            this.modalIsVisible = false;
                            return true;
                    }
                }
            },
            showAllIdentifiers() {
                this.identifiersMode = 'all';
                this.setIdentifiers();
            },
            showLessIdentifiers() {
                this.identifiersMode = 'preview';
                this.setIdentifiers();

                document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
            },
            showConfirmDelete() {
                this.toggleModal();
            },
            toggleModal() {
                this.showModalDelete = !this.showModalDelete;
            },
            updateItem() {
                showToastr("Mise à jour en cours…", true);
                axios.patch(`/api/v1/albums/${this.item._id}`)
                    .then( (res) => {
                        showToastr("Mise à jour réalisée avec succès", true);
                        this.item = res.data;
                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Impossible de mettre à jour cet album", false);
                    });
            },
            deleteItem() {
                axios.delete(`/api/v1/albums/${this.item._id}`)
                    .then( () => {
                        window.location.href = "/ma-collection";
                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
                    })
                    .finally(() => {
                        this.toggleModal();
                    });
            },
            goToArtist() {
                return "";
            },
        },
    }).mount('#ma-collection-details');
}