/*!
* IconPicker ('https://github.com/furcan/IconPicker')
* Version: 1.5.0
* Author: Furkan MT ('https://github.com/furcan')
* Dependencies: Font Awesome Free v5.11.2 (https://fontawesome.com/license/free)
* Copyright 2019 IconPicker, MIT Licence ('https://opensource.org/licenses/MIT')*
*/

'use strict';

// IconPicker: Default Options on
var ipDefaultOptions = {
    jsonUrl: null,
    searchPlaceholder: 'Search Icon',
    showAllButton: 'Show All',
    cancelButton: 'Cancel',
    noResultsFound: 'No results found.',
    borderRadius: '20px',
    appendTo: ''
}
var ipNewOptions;
var ipGithubUrl = 'https://github.com/furcan/IconPicker';
// IconPicker: Default Options off

// IconPicker: Extend Options on
var extendIconPicker = function () {
    var extended = {};
    var deep = false;
    var i = 0;
    if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
        deep = arguments[0];
        i++;
    }
    var merge = function (obj) {
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
                    extended[prop] = extendIconPicker(extended[prop], obj[prop]);
                } else {
                    extended[prop] = obj[prop];
                }
            }
        }
    };
    for (; i < arguments.length; i++) {
        merge(arguments[i]);
    }
    return extended;
};
// IconPicker: Extend Options off


// IconPicker: Main on
var IconPicker = {

    // init
    Init: function (ipUserOptions) {
        ipNewOptions = extendIconPicker(true, ipDefaultOptions, ipUserOptions);
    },

    // run
    Run: function (theButton, theCallback) {

        // IconPicker: Console Error Function on
        var ipConsoleError = function (errorMessage) {
            return console.error('%c IconPicker (Error) ', 'padding:2px;border-radius:20px;color:#fff;background:#f44336', '\n' + errorMessage);
        }
        // IconPicker: Console Error Function off

        // IconPicker: Console Log Function on
        var ipConsoleLog = function (errorMessage) {
            return console.log('%c IconPicker (Info) ', 'padding:2px;border-radius:20px;color:#fff;background:#00bcd4', '\n' + errorMessage);
        }
        // IconPicker: Console Log Function off

        // IconPicker: Check The Arguments For Proceed on
        if (arguments && arguments.length <= 2) {

            // query selector
            var ipButtons = document.querySelectorAll(theButton);

            // if button exist on the document
            if (ipButtons && ipButtons.length > 0) {
                for (var i = 0; i < ipButtons.length; i++) {

                    // IconPicker: Button Listeners -> Send XMLHttpRequest on
                    var ipButton = ipButtons[i];
                    ipButton.addEventListener('click', function () {
                        var jsonUrl = ipNewOptions.jsonUrl;
                        var inputElement = this.dataset.iconpickerInput;
                        var previewElement = this.dataset.iconpickerPreview;
                        var showAllButton = ipNewOptions.showAllButton;
                        if (!showAllButton || (showAllButton && showAllButton.length < 1)) {
                            showAllButton = ipDefaultOptions.showAllButton;
                        }
                        var cancelButton = ipNewOptions.cancelButton;
                        if (!cancelButton || (cancelButton && cancelButton.length < 1)) {
                            cancelButton = ipDefaultOptions.cancelButton;
                        }
                        var searchPlaceholder = ipNewOptions.searchPlaceholder;
                        if (!searchPlaceholder || (searchPlaceholder && searchPlaceholder.length < 1)) {
                            searchPlaceholder = ipDefaultOptions.searchPlaceholder;
                        }
                        var borderRadius = ipNewOptions.borderRadius;
                        if (!borderRadius || (borderRadius && borderRadius.length < 1)) {
                            borderRadius = ipDefaultOptions.borderRadius;
                        }

                        // check the json url on
                        if (!jsonUrl) {
                            ipConsoleError('You have to set the path of IconPicker JSON file to "jsonUrl" option. \n\nVisit to learn how: ' + ipGithubUrl);
                            return false;
                        }
                        // check the json url off

                        // check the input on
                        var checkInput = document.querySelectorAll(inputElement);
                        if (checkInput.length <= 0) {
                            ipConsoleError('You must define your Input element with it\'s ID or Class Name to your Button element data attribute. \n\nExample: \ndata-iconpicker-input="#MyIconInput" or \ndata-iconpicker-input=".my-icon-input" \n\nVisit to learn how: ' + ipGithubUrl);
                            return false;
                        }
                        // check the input off

                        // check the preview icon on
                        var checkPreviewIcon = document.querySelectorAll(previewElement);
                        if (checkPreviewIcon.length <= 0) {
                            ipConsoleLog('You can define your Preview Icon element with it\'s ID or Class Name to your Button element data attribute. \n\nExample: \ndata-iconpicker-preview="i#MyIconElement" or \ndata-iconpicker-preview="i.my-icon-element" \n\nVisit to learn how: ' + ipGithubUrl);
                        }
                        // check the preview icon off

                        // check the callback on
                        if (!theCallback && typeof theCallback !== 'function') {
                            theCallback = undefined;
                        }
                        // check the callback off

                        getIconListXmlHttpRequest(jsonUrl, showAllButton, cancelButton, searchPlaceholder, borderRadius, inputElement, previewElement, theCallback);

                    });
                    // IconPicker: Button Listeners -> Send XMLHttpRequest off

                }
            }
            // not exist
            else {
                ipConsoleError('You called the IconPicker with "' + theButton + '" selector, but there is no such element on the document.');
            }

        } else if (arguments && arguments.length > 2) {
            ipConsoleError('More parameters than allowed.');
            return false;
        } else {
            ipConsoleError('You have to call the IconPicker with an Element(Button or etc.) Class or ID. \n\nYou can also find the other required data attributes in the Documentation. \n\nVisit: ' + ipGithubUrl);
            return false;
        }
        // IconPicker: Check The Arguments For Proceed off


        // IconPicker: Get Library from JSON and AppendTo Body on
        var getIconListXmlHttpRequest = function (jsonUrl, buttonShowAll, buttonCancel, searchPlaceholder, borderRadius, inputElement, previewElement, theCallback) {

            // if chrome browser
            if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
                // check the protocol
                if (window.location.protocol.indexOf('http') <= -1) {
                    ipConsoleLog('Chrome Browser blocked this request by CORS policy.');
                    return false;
                }
            }

            // modal element
            var ipElement = document.getElementById('IconPickerModal');

            // if modal element doesn't exist on document send XMLHttpRequest
            if (!ipElement) {
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open('GET', jsonUrl, true);
                xmlHttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
                xmlHttp.send();
                xmlHttp.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        if (this.status === 200) { // success
                            var data = this.responseText;
                            appendIconListToBody(data, buttonShowAll, buttonCancel, searchPlaceholder, borderRadius, inputElement, previewElement, theCallback);
                        } else {
                            ipConsoleError('XMLHttpRequest Failed.');
                        }
                    }
                };
            }
        }
        // IconPicker: Get Library from JSON and AppendTo Body off


        // IconPicker: Append Library to Body on
        var appendIconListToBody = function (data, buttonShowAll, buttonCancel, searchPlaceholder, borderRadius, inputElement, previewElement, theCallback) {

            // data
            var jsonData = JSON.parse(data);

            // --- DEBOUNCE FUNCTION ---
            const debounce = (func, delay) => {
                let timeoutId;
                return function (...args) {
                    clearTimeout(timeoutId);
                    timeoutId = setTimeout(() => {
                        func.apply(this, args);
                    }, delay);
                };
            };

            // --- FAVORITES SCRIPT START ---

            // Helper functions to get, save, and toggle favorites in localStorage
            const getFavorites = () => {
                const favorites = localStorage.getItem('iconPickerFavorites');
                return favorites ? JSON.parse(favorites) : [];
            };

            const saveFavorites = (favorites) => {
                localStorage.setItem('iconPickerFavorites', JSON.stringify(favorites));
            };

            const toggleFavorite = (iconClass) => {
                let favorites = getFavorites();
                const index = favorites.indexOf(iconClass);
                if (index > -1) {
                    favorites.splice(index, 1); // Remove from favorites
                } else {
                    favorites.push(iconClass); // Add to favorites
                }
                saveFavorites(favorites);
            };

            // Function to render both favorites and all icons lists
            const renderIcons = () => {
                let favoritesHTML = '';
                const favorites = getFavorites();
                favorites.forEach(fav => {
                    favoritesHTML += `<i data-search="${fav}" data-class="${fav}" class="select-icon ${fav}"></i>`;
                });

                let allIconsHTML = '';
                for (var key in jsonData) {
                    if (jsonData.hasOwnProperty(key)) {
                        var forObj = jsonData[key];
                        allIconsHTML += `<i data-search="${forObj}" data-class="${forObj}" class="select-icon ${forObj}"></i>`;
                    }
                }
                return { favoritesHTML, allIconsHTML };
            };

            // --- FAVORITES SCRIPT END ---

            const { favoritesHTML, allIconsHTML } = renderIcons();

            // loading indicator
            var loadingIndicator = '<div id="IconPickerLoading"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(25 50)"><circle cx="0" cy="0" r="9" fill="#1e1e1e" transform="scale(0.24 0.24)"><animateTransform attributeName="transform" type="scale" begin="-0.2666s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="0.8s" repeatCount="indefinite"/></circle></g><g transform="translate(50 50)"><circle cx="0" cy="0" r="9" fill="#1e1e1e" transform="scale(0.00153 0.00153)"><animateTransform attributeName="transform" type="scale" begin="-0.1333s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="0.8s" repeatCount="indefinite"/></circle></g><g transform="translate(75 50)"><circle cx="0" cy="0" r="9" fill="#1e1e1e" transform="scale(0.3 0.3)"><animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="0.8s" repeatCount="indefinite"/></circle></g></svg></div>';

            // icons wrap
            var iconWrap = '<div class="ip-icons-content" style="border-radius:' + borderRadius + ';">' +
                '<div class="ip-icons-search"><input id="IconPickerSearch" type="text" spellcheck="false" autocomplete="off" placeholder="' + searchPlaceholder + '" style="border-radius:' + borderRadius + ';" /><i class="placeholder-icon fas fa-search"></i></div>' +
                '<div class="ip-icons-search-results" style="display: none;"></div>' +
                '<div class="ip-icons-area">' +
                loadingIndicator +
                '<div id="ip-favorites-area">' +
                '<p style="clear: both;margin-bottom: 0">'+window.backend_labels.favorites+' <a class="ip-add-favorite"><i class="fas fa-plus"></i> '+window.backend_labels.add+'</a><i style="display:none;" id="fav_mode_instructions">&nbsp;&nbsp;'+window.backend_labels.fav_mode_instructions+'</i></p>' +
                '<div class="ip-favorites-icons-container">' + favoritesHTML + '</div>' +
                '</div>' +
                '<p style="clear: both;margin-bottom: 0">'+window.backend_labels.all_icons+'</p>' +
                '<div class="ip-all-icons-container">' + allIconsHTML + '</div>' +
                '<a class="ip-show-all-icons" style="border-radius:' + borderRadius + ';">' + buttonShowAll + '</a>' +
                '</div>' +
                '<div class="ip-icons-footer"><a class="cancel" style="border-radius:' + borderRadius + ';">' + buttonCancel + '</a></div>' +
                '</div>';


            // create the modal element
            var IconPickerModal = document.createElement('div');
            IconPickerModal.id = 'IconPickerModal';
            IconPickerModal.innerHTML = iconWrap;

            // body
            var docBody = ipNewOptions.appendTo;
            if (docBody === '') {
                docBody = document.body;
            }

            // append to body
            docBody.appendChild(IconPickerModal);

            // get the modal element
            var ipElement = document.getElementById(IconPickerModal.id);

            // modal element display css
            ipElement.style.display = 'block';

            // heights
            var ipHeight = parseInt(ipElement.offsetHeight);
            var winHeight = parseInt(window.innerHeight);

            // modal element position top css on
            var liveScrollTop = parseInt(window.pageYOffset || document.documentElement.scrollTop);
            var totalTopPos = liveScrollTop + ((winHeight - ipHeight) / 2);
            if (winHeight + 20 <= ipHeight) {
                totalTopPos = liveScrollTop;
            }
            ipElement.style.top = totalTopPos + 'px';
            // modal element position top css off

            // add css animation class to modal
            ipElement.classList.add('animate');

            // close and remove all on
            var removeIpElement = function (delay) {
                ipElement.classList.remove('animate');
                setTimeout(function () {
                    docBody.removeChild(ipElement);
                }, delay);
            }

            // --- FAVORITE & ICON CLICK LOGIC ---
            let isFavoriteMode = false;

            const reRenderFavorites = () => {
                const favorites = getFavorites();
                let favoritesHTML = '';
                favorites.forEach(fav => {
                    favoritesHTML += `<i data-search="${fav}" data-class="${fav}" class="select-icon ${fav}"></i>`;
                });
                const favoritesIconsContainer = ipElement.querySelector('.ip-favorites-icons-container');
                if (favoritesIconsContainer) {
                    favoritesIconsContainer.innerHTML = favoritesHTML;
                }
            };

            const handleIconClick = (e) => {
                // Use event delegation to handle clicks on icons
                if (e.target.matches('.select-icon')) {
                    e.preventDefault();
                    var iconClassName = e.target.dataset.class;
                    var inputElm = document.querySelectorAll(inputElement);
                    var previewElm = document.querySelectorAll(previewElement);

                    if (isFavoriteMode) {
                        toggleFavorite(iconClassName);
                        reRenderFavorites();
                        return;
                    }

                    // each input value on
                    for (var j = 0; j < inputElm.length; j++) {
                        var getTagName = inputElm[j].tagName.toString().toLowerCase();
                        if (getTagName === 'input' || getTagName === 'textarea') {
                            inputElm[j].value = iconClassName;
                        } else {
                            inputElm[j].innerHTML = iconClassName;
                        }
                    }
                    // each input value off

                    // each preview on
                    for (var k = 0; k < previewElm.length; k++) {
                        previewElm[k].className = iconClassName;
                    }
                    // each preview off

                    // callback on
                    if (theCallback) {
                        theCallback();
                    }
                    // callback off

                    removeIpElement(400);
                }
            };

            const favoriteButton = ipElement.querySelector('.ip-add-favorite');
            favoriteButton.addEventListener('click', function (e) {
                e.preventDefault();
                isFavoriteMode = !isFavoriteMode;
                this.classList.toggle('active');
                this.innerHTML = isFavoriteMode ? window.backend_labels.fav_mode : '<i class="fas fa-plus"></i> '+window.backend_labels.add;
                document.getElementById('fav_mode_instructions').style.display = isFavoriteMode ? 'inline-block' : 'none';
            });

            // Attach a single click listener to the main containers
            ipElement.querySelector('.ip-icons-area').addEventListener('click', handleIconClick);
            ipElement.querySelector('.ip-icons-search-results').addEventListener('click', handleIconClick);


            // remove loading indicator on
            var loadingElement = document.getElementById('IconPickerLoading');
            var ltAnimate = setTimeout(function () {
                loadingElement.classList.add('hide');
                clearTimeout(ltAnimate);
            }, 600);
            var ltRemove = setTimeout(function () {
                loadingElement.parentNode.removeChild(loadingElement);
                clearTimeout(ltRemove);
            }, 900);
            // remove loading indicator off

            // show all button click listener on
            var showAllButtonElm = document.getElementById(IconPickerModal.id).getElementsByClassName('ip-show-all-icons')[0];
            showAllButtonElm.addEventListener('click', function () {
                ipElement.classList.add('show-all');
                this.parentNode.removeChild(this);
            }, false);
            // show all button click listener off

            // cancel button click listener on
            var cancelButtonElm = document.getElementById(IconPickerModal.id).getElementsByClassName('cancel')[0];
            cancelButtonElm.addEventListener('click', function () {
                removeIpElement(400);
            }, false);
            // cancel button click listener off

            // search input keyup listener on
            var searchInputElm = document.getElementById('IconPickerSearch');

            const handleSearch = debounce((e) => {
                // this val
                var searchVal = e.target.value.toString().toLowerCase().trim();

                // define icons areas
                const allIconsContainer = ipElement.querySelector('.ip-all-icons-container');
                const allIconsTitle = allIconsContainer.previousElementSibling;
                const showAllButton = ipElement.querySelector('.ip-show-all-icons');
                const searchResultArea = ipElement.querySelector('.ip-icons-search-results');


                // clear old results
                searchResultArea.innerHTML = '';

                if (searchVal.length > 0) {
                    // Hide "All Icons" section
                    allIconsContainer.style.display = 'none';
                    allIconsTitle.style.display = 'none';
                    if (showAllButton) {
                        showAllButton.style.display = 'none';
                    }
                    searchResultArea.style.display = 'block';

                    var tempIcons = '';
                    for (var key in jsonData) {
                        if (jsonData.hasOwnProperty(key)) {
                            var forObj = jsonData[key];
                            if (forObj.toString().indexOf(searchVal) > -1) {
                                tempIcons += `<i data-search="${forObj}" data-class="${forObj}" class="search-icon select-icon ${forObj}"></i>`;
                            }
                        }
                    }

                    if (tempIcons.length < 1) {
                        var noResultsText = ipNewOptions.noResultsFound;
                        if (!noResultsText || (noResultsText && noResultsText.length < 1)) {
                            noResultsText = ipDefaultOptions.noResultsFound;
                        }
                        tempIcons = '<p class="ip-no-results-found">' + noResultsText + '</p>';
                    }

                    searchResultArea.innerHTML = tempIcons;
                } else {
                    // Show "All Icons" section
                    allIconsContainer.style.display = '';
                    allIconsTitle.style.display = '';
                    if (showAllButton) {
                        showAllButton.style.display = '';
                    }
                    searchResultArea.style.display = 'none';
                }
            }, 250);

            searchInputElm.addEventListener('keyup', handleSearch);
        }
        // IconPicker: Append Library to Body off
    },
}
// IconPicker: Main off


