class VehicleThumbnail {
    constructor(vehicle) {
        this.id = vehicle.id_vehicle;
        this.name = vehicle.make + ' ' + vehicle.model;
        this.year = vehicle.year;
        this.make = vehicle.make;
        this.model = vehicle.model;
        this.trim = vehicle.trim;
        this.landingImage = vehicle.landingImage;
        this.advertisePrice = vehicle.advertise_price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        this.stockNumber = vehicle.stock_number;
        this.mileage = vehicle.mileage;
    }

    generateCardElement() {
        const wrapper = document.createElement('div');
        wrapper.innerHTML = this.generateCardHTML().trim();
    
        // Get the vehicle-card element
        const cardElement = wrapper.querySelector('.vehicle-card');
        const ripple = new mdc.ripple.MDCRipple(cardElement);
        ripple.unbounded = false;
        cardElement.addEventListener('click', () => {
            console.log(dataStore)
            var queryString = encodeURIComponent(JSON.stringify(dataStore.filters));

            const url = `vehicle-details/?vehicle_id=${encodeURIComponent(this.id)}&filters=${queryString}`;
            window.location.href = url;

        });

                   
    
        return cardElement;
    }

  

    generateCardHTML() {
        return `
            <div class="bg-white shadow-md rounded-md transition-all duration-500 vehicle-card cursor-pointer mdc-ripple-surface hover:shadow-lg" data-vehicle-id="${this.id}">
                <img src="${this.landingImage}" alt="Vehicle Image" class="w-full h-auto object-cover transition-all duration-500 vehicle-image rounded-tl-md rounded-tr-md">
                <div class="flex flex-col justify-around transition-all duration-500 p-4">
                    <h3 class="text-lg font-semibold mb-2 break-words ">${this.year} ${this.name} ${this.trim.join(' - ')}</h3>
                    <div class="text-gray-600">Year: ${this.year}</div>
                    <div class="text-gray-600">Mileage: ${this.mileage} km</div>
                    <div class="text-red-800 font-bold mt-2">Price: $${this.advertisePrice}</div>
                    <div class="text-gray-600">Stock #: ${this.stockNumber} km</div>
                </div>
            </div>
        `;
    }
}

// Initialize the ripple component for all instances of VehicleThumbnail
document.addEventListener('DOMContentLoaded', function () {
    const vehicleThumbnails = document.querySelectorAll('.mdc-ripple-surface');
    vehicleThumbnails.forEach(thumbnail => {
        const ripple = new mdc.ripple.MDCRipple(thumbnail);
        ripple.unbounded = true;
    });
});