var app = new Vue({
    el: '#app',
    data() {
        return {
            data: [],
            tipoVehiculos: [],
            marcas: [],
            marcasAux: [],
            dataCopia: [],
            selectedCarType: null,
            selectedMarca: null,
            precioMin: 0,
            precioMax: 0,
            resultados: [],
            loading: false,
            noResultados: false,
            activeTab: 'carros-nuevos',
            selectedPrecio: '0'
        }
    },
    methods: {
        formatoMexico: function (data) {
            const exp = /(\d)(?=(\d{3})+(?!\d))/g;
            const rep = '$1.';
            data.acf.precio_vehiculo = data.acf.precio_vehiculo.replace(exp, rep);
            data.acf.precioSinFormato = +data.acf.precio_vehiculo.replaceAll('.', '');
        },

        onSelectCarType: function (carType) {
            this.selectedCarType = carType;
            if (carType) {
                this.marcas = this.dataCopia.filter(item => item.acf.tipo_de_vehiculo.includes(carType));
            } else {
                this.marcas = this.dataCopia.filter(item => item.acf.categoria_vehiculo === 'carros-nuevos' || (!item.acf.categoria_vehiculo && item.acf.marca));
            }
            this.onMapMarcas();

        },
        onMapMarcas: function () {
            this.marcas = this.marcas
                .map(item => item.acf.marca)
                .reduce((value, item) => {
                    if (!value.find(itemDB => itemDB === item)) {
                        value.push(item);
                    }
                    return value;
                }, []);

            this.marcas.sort();
        },

        onSelectedMarca: function ($event) {
            this.selectedMarca = $event.target.value;
        },

        onSelectedPrecio: function ($event) {
            this.precioMin = +$event.target.value.split("-")[0];
            this.precioMax = +$event.target.value.split("-")[1] | 0;
        },

        onFilter: function () {
            this.loading = true;
            this.resultados = this.data;
            if (this.selectedCarType) {
                this.resultados = this.resultados.filter(item => item.acf.tipo_de_vehiculo.includes(this.selectedCarType));
            } else if (this.activeTab === null || this.activeTab === 'carros-nuevos') {
                this.resultados = this.resultados.filter(item => item.acf.categoria_vehiculo === 'carros-nuevos' || !item.acf.categoria_vehiculo);
            }

            if (this.selectedMarca) {
                this.resultados = this.resultados.filter(item => item.acf.marca === this.selectedMarca)
            }
            if (this.precioMin && this.precioMax) {
                this.resultados = this.resultados.filter(item => item.acf.precioSinFormato >= this.precioMin && item.acf.precioSinFormato <= this.precioMax)
            }
            if (this.precioMin && !this.precioMax) {
                this.resultados = this.resultados.filter(item => +item.acf.precioSinFormato >= this.precioMin)
            }
            this.noResultados = this.resultados.length === 0;
            this.loading = false

            this.resultados.sort((a, b) => a.acf.precioSinFormato > b.acf.precioSinFormato ? 1 : -1)
            setTimeout(() => {
            }, 3000)
        },
        // Método para filtrar según la pestaña activa
        filterByTab: function () {
            this.resultados = [];
            if (this.activeTab === 'carros-nuevos' || !this.activeTab) {
                this.data = this.dataCopia.filter(item => item.acf.categoria_vehiculo === 'carros-nuevos' || !item.acf.categoria_vehiculo);
                // this.marcas = this.data.filter(item => item.acf.categoria_vehiculo && item.acf.categoria_vehiculo === 'carros-nuevos');
                this.marcas = this.data;
            } else if (this.activeTab === 'motos') {
                this.data = this.dataCopia.filter(item => item.acf.categoria_vehiculo === 'motos');
                this.marcas = this.data.filter(item => item.acf.categoria_vehiculo && item.acf.categoria_vehiculo === 'motos');
                // Lógica de filtrado para motos
            } else if (this.activeTab === 'buggy') {
                this.data = this.dataCopia.filter(item => item.acf.categoria_vehiculo === 'buggy');
                this.marcas = this.data.filter(item => item.acf.categoria_vehiculo && item.acf.categoria_vehiculo === 'buggy');
                // Lógica de filtrado para buggies
            }
            this.data.sort((a, b) => a.acf.precioSinFormato > b.acf.precioSinFormato ? 1 : -1)
            this.onMapMarcas();

        },

        // Método para cambiar la pestaña activa
        changeTab: function (tabId) {
            this.activeTab = tabId;
            this.selectedMarca = null;
            this.selectedCarType = null;
            this.precioMin = 0;
            this.precioMax = 0;
            this.selectedPrecio = '0';
            this.filterByTab(); // Llamar al método de filtrado cuando cambie la pestaña
        },
    },
    mounted() {
        let request = [
            axios.get('https://loscoches.com/wp-json/wp/v2/wp-vehiculos?_fields=id,title,link,acf.precio_vehiculo,acf.tipo_de_vehiculo,acf.categoria_vehiculo,acf.marca,acf.imagev&per_page=100&page=1&acf_format=standard'),
            axios.get('https://loscoches.com/wp-json/wp/v2/wp-vehiculos?_fields=id,title,link,acf.precio_vehiculo,acf.tipo_de_vehiculo,acf.categoria_vehiculo,acf.marca,acf.imagev&per_page=100&page=2&acf_format=standard'),
            // Otros axios.get...
        ];

        Promise.allSettled(request)
            .then(resp => {
                this.data = resp.flatMap(item => item.value.data)
                this.tipoVehiculos = this.data.reduce((value, item) => {
                    if (item.acf.tipo_de_vehiculo && !value.find(itemDB => itemDB === item.acf.tipo_de_vehiculo)) {
                        value.push(item.acf.tipo_de_vehiculo);
                    }

                    return value;
                }, []);

                this.loading = false;
                this.data.forEach(data => this.formatoMexico(data));
                this.data.sort((a, b) => a.acf.precioSinFormato > b.acf.precioSinFormato ? 1 : -1)
                this.dataCopia = JSON.parse(JSON.stringify(this.data));
                this.onSelectCarType(null);
            });
    }
});