/**
 * Blog Over Customizer Breadcrumb Controls
 * 
 * Handles dynamic breadcrumb section preview selector based on position setting.
 * When position is "in-page-header", breadcrumb is inside page header.
 * When position is "below-header", breadcrumb is in its own container.
 * 
 * @package Blog_Over
 */
(function ($) {
    'use strict';

    // Wait for Customizer ready
    wp.customize.bind('ready', function () {

        /**
         * Get the current breadcrumb position
         */
        function getBreadcrumbPosition() {
            var setting = wp.customize('blog_over_breadcrumb_position');
            return setting ? setting.get() : 'below-header';
        }

        /**
         * Update the breadcrumb section's preview element selection
         * based on the breadcrumb position setting.
         */
        function updateBreadcrumbSectionFocus() {
            var section = wp.customize.section('blog_over_breadcrumb_section');
            var position = getBreadcrumbPosition();

            if (!section) {
                return;
            }

            // Update the preview selector based on position
            if (position === 'in-page-header') {
                // When in page header, target the breadcrumb inside page header
                section.params.customizeAction = wp.customize.l10n.customizingPreviewOf || 'Customizing';
            } else {
                // When below header, target the standalone breadcrumb container
                section.params.customizeAction = wp.customize.l10n.customizingPreviewOf || 'Customizing';
            }
        }

        /**
         * Focus handling for the breadcrumb section
         * When section is expanded, scroll to the correct element based on position
         */
        wp.customize.section('blog_over_breadcrumb_section', function (section) {
            section.expanded.bind(function (isExpanded) {
                if (isExpanded) {
                    var position = getBreadcrumbPosition();
                    var targetSelector;

                    if (position === 'in-page-header') {
                        // Scroll to breadcrumb inside page header
                        targetSelector = '.blog-over-page-header .blog-over-breadcrumb';
                    } else {
                        // Scroll to standalone breadcrumb container
                        targetSelector = '.blog-over-breadcrumb-container';
                    }

                    // Send message to preview to scroll to element and highlight it
                    wp.customize.previewer.send('blog-over-breadcrumb-focus', {
                        selector: targetSelector,
                        position: position
                    });
                }
            });
        });

        // Initial setup
        updateBreadcrumbSectionFocus();

        // Listen to breadcrumb position setting changes
        wp.customize('blog_over_breadcrumb_position', function (setting) {
            setting.bind(function (newValue) {
                updateBreadcrumbSectionFocus();
            });
        });
    });

})(jQuery);
