/**
 * Blog Over Customizer Heading Control JavaScript
 * 
 * Handles the toggle functionality for collapsible heading controls.
 * 
 * IMPORTANT: These are "setting-less" controls - they do NOT have a backing
 * Customizer setting. The toggle state is handled purely in JavaScript and
 * only controls visibility of related controls. Nothing is saved to the database.
 * This prevents the Customizer "dirty state" bug.
 */
(function ($) {
    'use strict';

    wp.customize.controlConstructor["blog-over-heading"] = wp.customize.Control.extend({
        ready: function () {
            var control = this;

            // Only setup toggle functionality if toggle is enabled
            if (!control.params.toggle) {
                return;
            }

            var $checkbox = control.container.find("input[type=checkbox]");
            var controlId = control.id;

            // Get initial state from localStorage (persists across page loads)
            // Default to expanded (true) if no localStorage value exists
            var storageKey = 'blog_over_heading_' + controlId;
            var storedState = localStorage.getItem(storageKey);
            var isExpanded = storedState === null ? true : storedState === 'true';

            // Set initial checkbox state
            $checkbox.prop("checked", isExpanded);

            // Apply initial visibility to child controls
            control.toggleChildControls(isExpanded);

            // When checkbox changes (user interaction), toggle visibility
            $checkbox.on("change", function () {
                var newValue = $(this).is(":checked");

                // Store state in localStorage for persistence
                localStorage.setItem(storageKey, newValue);

                // Toggle visibility of child controls
                control.toggleChildControls(newValue);
            });

            // When clicking the heading wrapper (but not the checkbox/label), toggle
            control.container.on("click", ".blog-over-heading-wrapper", function (e) {
                // Don't toggle if clicking directly on the checkbox or its label
                if ($(e.target).is("input, label") || $(e.target).closest("label").length) {
                    return;
                }
                // Toggle the checkbox and trigger change
                $checkbox.prop("checked", !$checkbox.prop("checked")).trigger("change");
            });
        },

        /**
         * Toggle visibility of child controls that belong to this design section.
         * Child controls are identified by having priority > 50 (the heading's priority).
         */
        toggleChildControls: function (isVisible) {
            var control = this;
            var sectionId = control.section();
            var headingPriority = control.priority();
            var toggleId = control.id;

            // Find all controls in the same section with priority > heading priority
            wp.customize.control.each(function (otherControl) {
                if (otherControl.section() !== sectionId) {
                    return;
                }

                // Skip the heading control itself
                if (otherControl.id === control.id) {
                    return;
                }

                // Only affect controls with priority greater than the heading
                if (otherControl.priority() <= headingPriority) {
                    return;
                }

                // Toggle visibility
                if (isVisible) {
                    otherControl.container.slideDown(200);
                } else {
                    otherControl.container.slideUp(200);
                }
            });

            // Update the heading's expanded/collapsed visual state
            if (isVisible) {
                control.container.addClass('blog-over-heading-expanded');
            } else {
                control.container.removeClass('blog-over-heading-expanded');
            }
        }
    });
})(jQuery);

