// source --> https://www.h2o-piscines.ch/wp-content/plugins/image-picker-for-elementor-forms/assets/image_picker.js?ver=1.0.1 
(function ($) {
    "use strict";
    function initImgDropdown($scope) {
        $scope.find('.yeekit-img-picker-conatiner select').each(function () {
            let $select = $(this);
            let $custom = $('<div class="img-dropdown"></div>');
            let $list = $('<ul class="img-dropdown-list"></ul>');
            $select.find('option').each(function () {
                let imgUrl = $(this).data('img');
                let val = $(this).val();
                let text = $(this).text();
                let $item = $('<li><img src="' + imgUrl + '"><span>' + text + '</span></li>');
                $item.on('click', function (e) {
                    e.stopPropagation();
                    $select.val(val).trigger('change');
                    $custom.find('.selected').html($(this).html());
                    $list.hide();
                });
                $list.append($item);
            });
            // determine initial selected (respect select default)
            var $selectedOption = $select.find('option:selected');
            var initialHtml;
            if ( $selectedOption.length ) {
                var selIndex = $select.find('option').index( $selectedOption );
                var $selLi = $list.find('li').eq( selIndex );
                initialHtml = $selLi.length ? $selLi.html() : ( $list.find('li:first').html() || '' );
                // mark the corresponding list item as active
                $list.find('li').removeClass('active');
                $selLi.addClass('active');
            } else {
                initialHtml = $list.find('li:first').html() || '';
                $list.find('li:first').addClass('active');
            }
            $custom.append('<div class="selected">' + initialHtml + '</div>');
            $custom.append($list);
            $select.hide().after($custom);
            $custom.on('click', function (e) {
                e.stopPropagation();
                $('.img-dropdown-list').not($list).hide(); // ẩn dropdown khác
                $list.toggle();
            });
            $(document).on('click', function () {
                $list.hide();
            });
        });
    }
    $(document).ready(function () {
        $('.yeekit-img-picker-item input').on('change', function () {
            var $item = $(this).closest('.yeekit-img-picker-item');
            if (this.type === 'radio') {
                $item.siblings('.yeekit-img-picker-item').removeClass('active');
                if (this.checked) {
                    $item.addClass('active');
                }
            } else {
                if (this.checked) {
                    $item.addClass('active');
                } else {
                    $item.removeClass('active');
                }
            }
        });
        initImgDropdown($(document));
    });
    if (typeof elementorFrontend !== 'undefined') {
        elementorFrontend.hooks.addAction('popup:after_open', function ($scope) {
            initImgDropdown($scope);
        });
    }
})(jQuery);