Vue.createApp({
    data() {
        return {
            q: '',
            year: '',
            country: '',
            format: '',
            loading: false,
            items: [],
            details: {},
            modalIsVisible: false,
            formats: [
                'Vinyl',
                'Acetate',
                'Flexi-disc',
                'Lathe Cut',
                'Mighty Tiny',
                'Shellac',
                'Sopic',
                'Pathé Disc',
                'Edison Disc',
                'Cylinder',
                'CD',
                'CDr',
                'CDV',
                'DVD',
                'DVDr',
                'HD DVD',
                'HD DVD-R',
                'Blu-ray',
                'Blu-ray-R',
                'Ultra HD Blu-ray',
                'SACD',
                '4-Track Cartridge',
                '8-Track Cartridge',
                'Cassette',
                'DC-International',
                'Elcaset',
                'PlayTape',
                'RCA Tape Cartridge',
                'DAT',
                'DCC',
                'Microcassette',
                'NT Cassette',
                'Pocket Rocker',
                'Revere Magnetic Stereo Tape Ca',
                'Tefifon',
                'Reel-To-Reel',
                'Sabamobil',
                'Betacam',
                'Betacam SP',
                'Betamax',
                'Cartrivision',
                'MiniDV',
                'Super VHS',
                'U-matic',
                'VHS',
                'Video 2000',
                'Video8',
                'Film Reel',
                'HitClips',
                'Laserdisc',
                'SelectaVision',
                'VHD',
                'Wire Recording',
                'Minidisc',
                'MVD',
                'UMD',
                'Floppy Disk',
                'File',
                'Memory Stick',
                'Hybrid',
                'All Media',
                'Box Set',
            ]
        }
    },
    methods: {
        search(event) {
            event.preventDefault();

            if ( this.loading ) {
                return false;
            }

            this.loading = true;
            let url = `/api/v1/search?q=${this.q}`;

            if ( this.year ) {
                url += `&year=${this.year}`;
            }
            if ( this.country ) {
                url += `&country=${this.country}`;
            }
            if ( this.format ) {
                url += `&format=${this.format}`;
            }

            axios.get(url)
                .then( response => {
                    const {
                        results,
                    } = response.data;
                    let items = [];

                    for (let i = 0 ; i < results.length ; i += 1 ) {
                        const {
                            id,
                            title,
                            thumb,
                            year,
                            country,
                            format,
                            genre,
                            style,
                        } = results[i];
                        items.push({
                            id,
                            title,
                            thumb,
                            year,
                            country,
                            format,
                            genre,
                            style,
                        });
                    }

                    this.items = items;
                })
                .catch((err) => {
                    showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        toggleModal() {
            this.modalIsVisible = !this.modalIsVisible;
        },
        loadDetails(discogsId) {
            axios.get(`/api/v1/search/${discogsId}`)
                .then( response => {
                    const {
                        data,
                    } = response;

                    this.details = data;
                    this.toggleModal();
                })
                .catch((err) => {
                    showToastr(err.response?.data?.message || "Impossible de charger les détails de cet album");
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        add() {
            axios.post('/api/v1/albums', this.details)
                .then(() => {
                    window.location.href = '/ma-collection';
                })
                .catch((err) => {
                    showToastr(err.response?.data?.message || "Impossible d'ajouter cet album pour le moment…");
                });
        },
        orderedItems(items) {
            return items.sort();
        }
    }
}).mount('#ajouter-album');