/*
 * 
 * divi fa icons front end Javascript
 * 
 * @since 1.0.0
 * 
 */
var diviFaIcon;
(function ($) {
    diviFaIcon = {
        settings: {
            IconElements: [
                '.et-core-control-toggle',
                '.et-fb-form__toggle[data-name="button"]',
                '.et-fb-form__toggle[data-name="button_one"]',
                '.et-fb-form__toggle[data-name="button_two"]',
                '.et-fb-form__toggle[data-name="image"]',
                '.et-fb-form__toggle[data-name="overlay"]',
            ],
            frontEndModules: [
                '.et_overlay',
                '.et-pb-icon',
                '.et_pb_shop',
                '.single_add_to_cart_button',
                '.dipi_btt_wrapper',
                '.et_pb_button.et_pb_custom_button_icon',
                '.et_pb_de_mach_view_button .et_pb_button',
                '.et_pb_more_button',
                '.et_pb_dmb_breadcrumbs li[data-icon]',
                '.et_pb_dmb_breadcrumbs a[data-icon]',
                '.dgpc_product_carousel .swiper-button-prev',
                '.dgpc_product_carousel .swiper-button-next',
                '.et_pb_b3_testimonial_grid_slider .swiper-button-next',
                '.et_pb_b3_testimonial_grid_slider .swiper-button-prev',
                '.dipi_blog_slider .swiper-button-next',
                '.dipi_blog_slider .swiper-button-prev',
                '.et_pb_testimonial_slider .swiper-button-next',
                '.et_pb_testimonial_slider .swiper-button-prev',
                '.dipi-blog-slider-main .swiper-button-prev',
                '.dipi-blog-slider-main .swiper-button-next',
                '.swiper-button-prev',
                '.swiper-button-next',
                '.dsm_icon_list_icon'
            ]
        },
        initilaize: function () {
            $this = diviFaIcon;
            $(document).ready(function () {
                $this.onInitMethods();
            });
        },
        onInitMethods: function () {
            $this.diviClickEvents();
            $this.displayIconFrontEnd();
        },
        diviClickEvents: function () {
            let elements = $this.settings.IconElements.join();
            let simboldArray = "";
            $(document).on('click', elements, function (e) {
                setTimeout(function () {
                    $('.et-fb-font-icon-list').each(function (i, element) {
                        $(this).find('li').each(function (i, child_lement) {
                            let iconData = $(this).data('icon') + '';
                            if(iconData.indexOf("|") > -1) {
                                simboldArray = iconData.split("|");
                            }else {
                                
                            }
                            let filter_class = "";
                            if(simboldArray[0] == 'et') {
                                filter_class = 'divi_icons_elegant_theme divi_icons_all';
                            }else if(simboldArray[0] == 'fa' || simboldArray[0] == 'fas' || simboldArray[0] == 'far' || simboldArray[0] == 'fab') {
                                filter_class = 'divi_icons_font_awesome divi_icons_all';
                            }
                            if (iconData.length > 1) {
                                $(this).attr({"data-iconfamily": simboldArray[0], "data-iconname": simboldArray[1], "title": simboldArray[1], "data-icon": $this.decodeIcon(simboldArray[2])});
                                $(this).addClass('divi_fa_icons_list divi_fa_' + simboldArray[0] + '_icon_fd '+filter_class);
                            } else {
                                $(this).attr("data-iconfamily", 'et');
                                $(this).addClass('divi_fa_icons_list divi_fa_et_icon_fd')
                            }
                        });
                    });
                }, 200);
            });
            //alert('hiii');
            $(document).on('click', '.divi_fa_filter', function(e) {
                e.preventDefault();
                let listId = $(this).data('list_id');
                let parentNode = $('#'+listId).parent().parent();
                console.log(listId);
                let iconFilter = $(this).data('filter_type');
                //$('.divi_fa_icons_list').css("overflow-y", "scroll");
                parentNode.find('.divi_fa_icons_message').hide();
                parentNode.find('.divi_fa_filter').removeClass('divi_active_filter');
                $(this).addClass('divi_active_filter');
                $('.divi_fa_icons_list').hide().filter('.divi_icons_'+iconFilter).show();
            });
            
            $( document ).on( 'keyup', '.divi_fa_custom_search', function() {
                //if ($('body.et-bfb').length || $('body.et-db').length) {
                    $('.et-fb-font-icon-list').css("overflow-y","scroll");
                    $('.divi_fa_icons_message').hide();
                    var searchStr = $(this).val();
                    var current_filter = $('.divi_fa_filter.divi_active_filter').data("filter_type");
                    if(!searchStr.length) {
                        $('.divi_icons_'+current_filter).show();
                    }
                    $('.divi_fa_icons_list').each(function() {
                        var str = $(this).attr("data-iconname");
                        if(str && str.indexOf(searchStr) > -1 ) {
                            if ( $(this).hasClass('divi_icons_'+current_filter) ) { $(this).show();  }
                        } else {
                            $(this).hide();
                        }
                    });
                    if ( $('.divi_fa_icons_list:not([style*="display: none"])').length == 0 ){
                            $('.et-fb-font-icon-list').css("overflow-y","hidden");
                            $('.divi_fa_icons_message').show();
                    }

		//}
            });
        },
        decodeIcon: function(iconCode) {
            var elem = document.createElement('textarea');
            elem.innerHTML = iconCode;
            return elem.value;
        },
        displayIconFrontEnd: function () {
            if ($('#et-fb-app').length && $this.isVisualEditor()) {
                /* if visual editor */

                var targetNode = document.getElementById('et-fb-app');
                var config = {characterData: true, childList: true, subtree: true, attributes: true};
                var callback = function (mutationsList) {
                    mutationsList.forEach(function (thisMutation) {
                        if (thisMutation.type == "attributes" || thisMutation.type == "characterData") {
                            var target = thisMutation.target;
                            if ($(target).attr('id') === 'et-fb-app' || $(target).attr('id') === 'et_fb_root' || $(target).hasClass('et_pb_section') || $(target).hasClass('et_pb_row') || $(target).hasClass('et_pb_column')) {
                                $this.displayDiviIcon(false);
                            }
                        }
                    });
                }
                var observer = new MutationObserver(callback);
                observer.observe(targetNode, config);
            } else {
                /* if front end */
                $this.displayDiviIcon(true);
            }

            if (
                    ($('#et-fb-app').length && !$this.isVisualEditor()) ||
                    ($('body.extra_page_et_theme_builder').length && !$this.isVisualEditor()) ||
                    ($('body.divi_page_et_theme_builder').length && !$this.isVisualEditor()) ||
                    ($('body.et-bfb').length && !$this.isVisualEditor())) {

                var targetNode = null;

                if ($('#et-fb-app').length)
                    targetNode = document.getElementById('et-fb-app');
                else if ($('body.divi_page_et_theme_builder').length)
                    targetNode = $('body.divi_page_et_theme_builder')[0];
                else if ($('body.extra_page_et_theme_builder').length)
                    targetNode = $('body.extra_page_et_theme_builder')[0];
                else
                    targetNode = $('body.et-bfb')[0];

                var config = {childList: true, subtree: true};
                var callback = function (mutationsList) {
                    mutationsList.forEach(function (thisMutation) {
                        if (thisMutation.type == 'childList') {
                            if ($('.et-fb-font-icon-list').length) {
                                $('.et-fb-font-icon-list').each(function (i, elem) {
                                    if (!$(elem).hasClass('icons-loaded')) {
                                        $this.DiviFaSearchFilter();
                                        $(elem).addClass('icons-loaded')
                                    }
                                })
                            }
                        }
                    });
                }
                var observer = new MutationObserver(callback);
                observer.observe(targetNode, config);
            }
        },
        DiviFaSearchFilter: function () {
            $('.et-fb-font-icon-list').each(function (i, el) {
                let filter_icons_id = $(this).attr('id');
                let parentContainer = $(this).parent().parent();

                if (parentContainer.find('.divi_fa_filter').length <= 0) {
                    var output = '';
                    output += '<div class="divi_fa_icons_message">No search result found.</div><div class="divi_fa_filter_wrap"><input data-icon-list="' + filter_icons_id + '" type="text" id="divi_fa_custom_search" class="divi_fa_custom_search"  placeholder="Search Icons....."  >';

                    output += '<a href="#" data-list_id="' + filter_icons_id + '" class="divi_fa_filter divi_active_filter"  data-filter_type="all">All</a>';

                    output += '<a href="#" data-list_id="' + filter_icons_id + '" class="divi_fa_filter" data-filter_type="elegant_theme">Elegant Themes</a>';
                    output += '<a href="#" data-list_id="' + filter_icons_id + '" class="divi_fa_filter" data-filter_type="font_awesome">Font Awesome</a>';
                    
                    output += '</div>';
                    parentContainer.append(output);
                }
            });
        },
        displayDiviIcon: function (hideIcon) {
            if (hideIcon) {
                $this.hideIcons();
            }
            //setTimeout(function () {
                $this.processIcon();
                if (hideIcon) {
                    $this.showIcons();
                }
            //}, 10);
        },
        hideIcons: function () {
            let moduleList = $this.settings.frontEndModules.join();
            if ($('#et-fb-app').length && $('iframe#et-fb-app-frame').length) {
                var builder_frame = $('iframe#et-fb-app-frame');
                $(moduleList, builder_frame.contents()).removeClass('show_icon');
                $(moduleList, builder_frame.contents()).addClass('hide_icon');
            } else {
                $(moduleList).removeClass('show_icon');
                $(moduleList).addClass('hide_icon');
            }
        },
        showIcons: function () {
            let moduleList = $this.settings.frontEndModules.join();
            if ($('#et-fb-app').length && $('iframe#et-fb-app-frame').length) {
                var builder_frame = $('iframe#et-fb-app-frame');
                $(moduleList, builder_frame.contents()).removeClass('hide_icon');
                $(moduleList, builder_frame.contents()).addClass('show_icon');
            } else {
                $(moduleList).removeClass('hide_icon');
                $(moduleList).addClass('show_icon');
            }
        },
        processIcon: function () {
            let moduleList = $this.settings.frontEndModules.join();
            $(moduleList).each(function () {
                console.log($(this).html());
                let simboldArray = '';
                let element = $(this);
                let iconContent;
                let replacehtml = true;
                //element.removeClass('divi_fa_icon_fd divi_fa_fas_icon_fd divi_fa_far_icon_fd divi_fa_fab_icon_fd');
                if($(this).html().indexOf("|") > -1 || $(this).html().indexOf("~|") > -1) {
                    iconContent = $(this).html();
                }else {
                    iconContent = $(this).attr('data-icon');
                    replacehtml = false;
                }
                
                if(iconContent.indexOf("|") > -1) {
                    simboldArray = iconContent.split("|");
                }else {
                    let iconFamily = element.data('iconfamily');
                    //if(iconFamily == 'fas' || iconFamily == 'fab' || iconFamily == 'far') {
                        //element.removeClass('divi_fa_fas_icon_fd divi_fa_far_icon_fd divi_fa_fab_icon_fd').addClass('divi_fa_'+iconFamily+'_icon_fd');
                    //}
                    
                    return;
                }
                let dataIcon = simboldArray[2];
                let dataIconFamily = simboldArray[0];
                element.attr(
                        {
                            'divi-fa-icon' : 'divi_fa_'+dataIconFamily+'_icon_fd',
                            'data-icon': $this.decodeIcon(dataIcon),
                            'data-iconfamily': dataIconFamily
                        }
                );
                element.removeClass('divi_fa_far_icon_fd divi_fa_fas_icon_fd divi_fa_far_icon_fd divi_fa_fab_icon_fd divi_fa_et_icon_fd').addClass('divi_fa_icon_fd divi_fa_' + dataIconFamily + '_icon_fd ');
                if(replacehtml) {
                    element.html($this.decodeIcon(simboldArray[2]));
                }
            });
        },
        isVisualEditor: function () {
            try {
                return window.self !== window.top;
            } catch (e) {
                return true;
            }
        }

    };

    diviFaIcon.initilaize();
})(jQuery);