(function ($) {
    function DynamicContent(element, options = {}) {
        let params = {
            'type': element.data('dynamic-type'),
            'id': element.data('dynamic-id'),
            '_v': Math.floor(Math.random() * 1000)
        };

        if (element.data('dynamic-count')) {
            params['count'] = element.data('dynamic-count');
        }

        if ($.isEmptyObject(options) === false) {
            $.extend(params, options);
        }

        $.get((window.location.href.indexOf('/admin/preview') > 0 ? '/admin/preview' : '') + '/render/dynamic', params, function(html) {
            let el = element.find('.section-dynamic-container');

            if (el) {
                if (options.fade) {
                    el.fadeOut(options.fade, function() {
                        el.html(html).fadeIn(options.fade);
                    });
                } else {
                    el.html(html);
                }
            }
        });
    }

    function getDynamicParams(href)
    {
        let url = new URL(window.location.origin + '/' + href);
        let search = new URLSearchParams(url.search);

        let params = {
            'fade': 200
        };

        if (search.has('p')) {
            params.p = search.get('p');
        }

        if (search.has('layout')) {
            params.layout = search.get('layout');
        }

        return params;
    }


    $.fn.dynamicContent = function (options = {}) {
        return $(this).each(function () {
            new DynamicContent($(this), options);
        });
    }

    $(document).ready(function() {
        $('.section-dynamic').dynamicContent();

        $('.section-dynamic').on('click', '.dynamic-xhr', function(e) {
            e.preventDefault();

            $(this).closest('.section-dynamic').dynamicContent(getDynamicParams($(this).attr('href')));
        });
    });

}(jQuery));