/**
 * Main scripts for Product Display
 * 
 * Handles general functionality for all layouts
 */

(function($) {
    'use strict';

    // WCPS Main Object
    var WCPS = {
        /**
         * Initialize
         */
        init: function() {
            this.initLayouts();
            this.initEvents();
            this.initAjaxFilters();
        },

        /**
         * Initialize Layout Specific Features
         */
        initLayouts: function() {
            // Initialize Grid Layout
            this.initGridLayout();
            
            // Initialize Gallery Layout
            this.initGalleryLayout();

        },

        /**
         * Initialize Grid Layout
         */
        initGridLayout: function() {
            // Layout add 08
            $('.wcps-layout-basic-grid').each(function() {
                var $grid = $(this);
                
                // Add equal height to products if needed
                if ($grid.hasClass('equal-height')) {
                    WCPS.equalizeProductHeights($grid.find('.wcps-product'));
                }
                
            });
            $('.wcps-layout-card-grid').each(function() {
                var $grid = $(this);
                
                // Add equal height to products if needed
                if ($grid.hasClass('equal-height')) {
                    WCPS.equalizeProductHeights($grid.find('.wcps-product'));
                }
            });
            $('.wcps-layout-masonry-grid').each(function() {
                var $grid = $(this);
                
                // Add equal height to products if needed
                if ($grid.hasClass('equal-height')) {
                    WCPS.equalizeProductHeights($grid.find('.wcps-product'));
                }
            });

            function getComputedStyle(element, variableName, defaultValue) {
                try {
                    if (!element || !variableName) return defaultValue;
                    const styles = getComputedStyle(element);
                    const value = styles.getPropertyValue(variableName);
                    return value.trim() || defaultValue;
                } catch (e) {
                    console.warn('Failed to get CSS variable:', e);
                    return defaultValue;
                }
            }

            // Responsive 
            $('.wcps-grid-container').each(function() {
                var $container = $(this);
                var updateGridLayout = function() {
                    var windowWidth = $(window).width();
                    var columns;
                    
                    // Determine number of columns based on screen width
                    if (windowWidth <= 480) {
                        columns = 1; // Mobile phones
                    } else if (windowWidth <= 768) {
                        columns = 2; // Tablets
                    } else if (windowWidth <= 1024) {
                        columns = 3; // Small desktops
                    } 
                    else {
                        // Get columns from CSS variable for large desktops
                        var wcpsContainer = $container.closest('.wcps-container')[0];
                        if (wcpsContainer && typeof window.getComputedStyle === 'function') {
                            var columnsValue = window.getComputedStyle(wcpsContainer).getPropertyValue('--wcps-columns');
                            columns = columnsValue ? parseInt(columnsValue.trim()) : 5;
                        } else {
                            columns = 5;
                        }
                    }
                    
                    // Update grid template columns
                    $container.css('grid-template-columns', 'repeat(' + columns + ', 1fr)');
                };
                
                // Initial layout update
                updateGridLayout();
                
                // Update on window resize
                $(window).on('resize', function() {
                    updateGridLayout();
                });
            });
        },

        
        /**
         * Utility function to make product heights equal
         */
        equalizeProductHeights: function($products) {
            var maxHeight = 0;
            
            // Reset heights
            $products.css('height', 'auto');
            
            // Find max height
            $products.each(function() {
                var height = $(this).outerHeight();
                maxHeight = Math.max(maxHeight, height);
            });
            
            // Set all products to max height
            $products.css('height', maxHeight + 'px');
        }
    };

    // Initialize on document ready
    $(document).ready(function() {
        WCPS.init();
    });

    // Re-initialize on window resize
    $(window).on('resize', function() {
        // Debounce resize event
        clearTimeout(window.wcpsResizeTimer);
        window.wcpsResizeTimer = setTimeout(function() {
            // $('.wcps-layout-grid.equal-height').each(function() {
            $('.wcps-layout-basic-grid.equal-height').each(function() {
                WCPS.equalizeProductHeights($(this).find('.wcps-product'));
            });
        }, 250);
    });

    // Make WCPS available globally
    window.WCPS = WCPS;

})(jQuery);