jQuery(function ($) {
    $(document).ready(function () {
        let preloader = $('#preloader-dialog').overlay({
            speed: 0,
            load: false,
            mask: {
                color: '#444',
                loadSpeed: 0,
                closeSpeed: 0,
                opacity: 0.5,
                zIndex: 200000,
            },
            closeOnClick: false,
            closeOnEsc: false,
            onLoad: function () {
                let content = this.getOverlay().find('.content');
                this.getOverlay().find('.close').hide();
                content.html('<p>'+this.getOverlay().data('busy-message')+'<\/p><div class="preloader_48x48">&nbsp;<\/div>');
            },
            onBeforeLoad: function () {
                preloader.data('preloader_is_open', true);
            },
            onClose: function () {
                preloader.data('preloader_is_open', false);
            }
        });

        $.preloader = {
            show: function () {
                let api = preloader.data('overlay');
                if (!preloader.data('preloader_is_open')) {
                    api.load();
                }
            },
            hide: function () {
                let api = preloader.data('overlay');
                if (preloader.data('preloader_is_open')) {
                    api.close();
                }
            },
            toggle: function () {
                let api = preloader.data('overlay');
                if (preloader.data('preloader_is_open')) {
                    api.close();
                } else {
                    api.load();
                }
            },
            update: function (content) {
                let api = preloader.data('overlay');
                if (content === undefined) {
                    throw 'The "content" parameter is required';
                }

                api.getOverlay().find('.close').show();
                api.getOverlay().find('.content').html(content);
            }
        }

        $.fn.selectBox = function (action) {
            switch (action) {
                case "update":
                    this.chosen('destroy').chosen();
                    break;
                case "destroy":
                    this.chosen('destroy');
                    break;
                default:
                    let selects = this.not('.flatpickr-monthDropdown-months');

                    selects.chosen({
                        disable_search_threshold: 5,
                        placeholder_text: " "
                    }).on('chosen:showing_dropdown', function (event, params) {
                        let chosen_container = $(event.target).next('.chosen-container');
                        let dropdown = chosen_container.find('.chosen-drop');
                        let dropdown_top = dropdown.offset().top - $(window).scrollTop();
                        let dropdown_height = dropdown.height();
                        let viewport_height = $(window).height();

                        if (dropdown_top + dropdown_height > viewport_height) {
                            chosen_container.addClass('chosen-drop-up');
                        }

                    }).on('chosen:hiding_dropdown', function (event, params) {
                        $(event.target).next('.chosen-container').removeClass('chosen-drop-up');
                    }).on('chosen:update', function () {
                        $(this).selectBox('update');
                    }).on('chosen:destroy', function () {
                        $(this).selectBox('destroy');
                    });
                    break;
            }
        }

        $(document).on('chosen:init', function (event, selector) {
            $(selector).selectBox();
        });

        $.fn.truncateText = function () {
            function updateStatus(entries) {
                for (let entry of entries) {
                    console.log(entry.target.scrollHeight+' > '+entry.target.clientHeight);
                    if (entry.target.scrollHeight > entry.target.clientHeight) {
                        entry.target.parentElement.classList.add('expandable');
                    } else {
                        entry.target.parentElement.classList.remove('expandable');
                    }
                }
            }

            const observer = new ResizeObserver(updateStatus);

            this.on('click', '.button', function () {
                const button = $(this);
                button.closest('.truncate-text').toggleClass('expanded');

                return false;
            });

            this.each(function () {
                observer.observe($(this).find('.truncate-text-container').get(0));
            });


        }

        $('select').selectBox();

        $('.truncate-text.expandable').truncateText();
    });
});