/**
 * Class: DooSearchas_Class_Slider
 * 
 * Handles a responsive horizontal slider component for displaying recent or featured items.
 * Dynamically calculates how many slides to show per view based on screen width and custom data attributes.
 * Provides manual navigation via "next" and "prev" buttons, and also supports automatic sliding at intervals.
 * Automatically updates layout on window resize for responsiveness.
 * 
 * Core Features:
 * - Responsive slide count (1, 2, or custom via `data-per-slide`)
 * - Button-based navigation (prev/next)
 * - Auto-slide functionality with loop
 * - Recalculation of layout on window resize
 * 
 * Called From:
 * - DOMContentLoaded event in frontend script
 */
class DooSearchas_Class_Slider {
    constructor(wrapperSelector = '#doosearchas_s-recent-items') {
        // Select the main wrapper element for the slider
        this.wrapper = document.querySelector(wrapperSelector);
        if (!this.wrapper) return; // Exit if wrapper is not found

        this.slider = this.wrapper.querySelector('.doosearchas_s-slider');
        this.slides = this.wrapper.querySelectorAll('.doosearchas_s-slide-item');
        this.prevBtn = this.wrapper.querySelector('.doosearchas_s-slider-btn.prev');
        this.nextBtn = this.wrapper.querySelector('.doosearchas_s-slider-btn.next');

        // Set total number of slides and initial state
        this.totalSlides = this.slides.length;
        this.currentIndex = 0;
        this.perSlide = this.getPerSlide(); // Determine slides visible per view

        this.init();  // Initialize the slider functionality
    }

    // Determine how many slides to show based on screen width or data attribute
    getPerSlide() {
        const width = window.innerWidth;
        if (width <= 889) return 1;
        if (width <= 1127) return 2;
        return parseInt(this.wrapper.dataset.perSlide) || 3;
    }

    // Ensure current index stays within valid range
    clampIndex() {
        if (this.currentIndex > this.totalSlides - this.perSlide) {
            this.currentIndex = this.totalSlides - this.perSlide;
        }
        if (this.currentIndex < 0) this.currentIndex = 0;
    }

    // Update the transform to show the correct slide position
    updateSlider() {
        const slideItem = this.slides[0];
        const slideWidth = slideItem.getBoundingClientRect().width;
        const slideGap = parseFloat(getComputedStyle(this.slider).gap) || 0;
        const translateX = (slideWidth + slideGap) * this.currentIndex;
        this.slider.style.transform = `translateX(-${translateX}px)`;
    }

    // Bind click events for navigation buttons and window resize handling
    bindEvents() {
        // Handle "Next" button click
        this.nextBtn.addEventListener('click', () => {
            if (this.currentIndex < this.totalSlides - this.perSlide) {
                this.currentIndex++;
                this.updateSlider();
            }
        });

        // Handle "Previous" button click
        this.prevBtn.addEventListener('click', () => {
            if (this.currentIndex > 0) {
                this.currentIndex--;
                this.updateSlider();
            }
        });

        // Handle window resize to recalculate slides per view
        window.addEventListener('resize', () => {
            this.perSlide = this.getPerSlide();
            this.clampIndex();
            this.updateSlider();
        });
    }

    // Automatically slide every X milliseconds (default: 4000ms)
    startAutoSlide(interval = 4000) {
        this.autoSlide = setInterval(() => {
            this.currentIndex = (this.currentIndex < this.totalSlides - this.perSlide) ? this.currentIndex + 1 : 0;
            this.updateSlider();
        }, interval);
    }

    // Initialize slider events and behavior
    init() {
        this.bindEvents(); // Setup event listeners
        this.updateSlider(); // Initial position
        this.startAutoSlide(); // Start auto sliding
    }
}

// Initialize the slider after DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
    new DooSearchas_Class_Slider();
});




