(function ($) {
    'use strict';
    wp.pawfect_customizerRepeater = {

        init: function () {
            $('.iconpicker-items>i').on('click', function () {
                var iconClass = $(this).attr('class').slice(3);
                var classInput = $(this).parents('.iconpicker-popover').prev().find('.icp');
                classInput.val(iconClass);
                classInput.attr('value', iconClass);

                var iconPreview = classInput.next('.input-group-addon');
                var iconElement = '<i class="fa '.concat(iconClass, '"><\/i>');
                iconPreview.empty();
                iconPreview.append(iconElement);

                var th = $(this).parent().parent().parent();
                classInput.trigger('change');
                pawfect_customizer_repeater_refresh_social_icons(th);
                return false;
            });
        },
        search: function ($searchField) {
            var itemsList = $searchField.parent().next().find('.iconpicker-items');
            var searchTerm = $searchField.val().toLowerCase();
            if (searchTerm.length > 0) {
                itemsList.children().each(function () {
                    if ($(this).filter('[title*='.concat(searchTerm)).length > 0 || searchTerm.length < 1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            } else {
                itemsList.children().show();
            }
        },
        iconPickerToggle: function ($input) {
            var iconPicker = $input.parent().next();
            iconPicker.addClass('iconpicker-visible');

            // Enhance the icon picker with better social media icons
            wp.pawfect_customizerRepeater.enhanceIconPicker(iconPicker);
        },
        enhanceIconPicker: function ($iconPicker) {
            var itemsContainer = $iconPicker.find('.iconpicker-items');

            if (itemsContainer.length > 0 && !$iconPicker.hasClass('enhanced')) {

                // Enhanced social media icons
                var enhancedIcons = {
                    'fa-facebook-f': 'Facebook',
                    'fa-twitter': 'Twitter',
                    'fa-instagram': 'Instagram',
                    'fa-linkedin-in': 'LinkedIn',
                    'fa-youtube': 'YouTube',
                    'fa-pinterest-p': 'Pinterest',
                    'fa-snapchat-ghost': 'Snapchat',
                    'fa-tiktok': 'TikTok',
                    'fa-whatsapp': 'WhatsApp',
                    'fa-telegram-plane': 'Telegram',
                    'fa-discord': 'Discord',
                    'fa-reddit-alien': 'Reddit',
                    'fa-tumblr': 'Tumblr',
                    'fa-flickr': 'Flickr',
                    'fa-vimeo-v': 'Vimeo',
                    'fa-twitch': 'Twitch',
                    'fa-spotify': 'Spotify',
                    'fa-soundcloud': 'SoundCloud',
                    'fa-github': 'GitHub',
                    'fa-gitlab': 'GitLab',
                    'fa-bitbucket': 'Bitbucket',
                    'fa-stack-overflow': 'Stack Overflow',
                    'fa-codepen': 'CodePen',
                    'fa-dribbble': 'Dribbble',
                    'fa-behance': 'Behance',
                    'fa-medium-m': 'Medium',
                    'fa-envelope': 'Email',
                    'fa-phone': 'Phone',
                    'fa-map-marker-alt': 'Location',
                    'fa-globe': 'Website',
                    'fa-rss': 'RSS',
                    'fa-share-alt': 'Share'
                };

                // Clear existing icons
                itemsContainer.empty();

                // Add enhanced social media icons
                Object.keys(enhancedIcons).forEach(function(iconClass) {
                    var iconName = enhancedIcons[iconClass];
                    var iconElement = $('<i class="fa ' + iconClass + '" title="' + iconName + '"></i>');
                    itemsContainer.append(iconElement);
                });

                // Mark as enhanced
                $iconPicker.addClass('enhanced');

            }
        }
    };

    $(document).ready(function () {
        wp.pawfect_customizerRepeater.init();

        $('.iconpicker-search').on('keyup', function () {
            wp.pawfect_customizerRepeater.search($(this));
        });

        // DISABLED: Let the advanced icon picker handle clicks for social media
        // $('.icp-auto').on('click', function () {
        //         wp.pawfect_customizerRepeater.iconPickerToggle($(this));
        // });

        // Only handle clicks for non-social media icon pickers
        $('.icp-auto').not('#customize-control-pawfect_social_media_icons .icp-auto').on('click', function () {
                wp.pawfect_customizerRepeater.iconPickerToggle($(this));
        });

        $(document).mouseup( function (e) {
            var container = $('.iconpicker-popover');

            if (!container.is(e.target)
                && container.has(e.target).length === 0)
            {
                container.removeClass('iconpicker-visible');
            }
        });

    });

})(jQuery);
