/**
 * Base.Duallistbox 1.0
 *
 * Requiere
 *     Base 1.0
 *     Ver: https://www.cssscript.com/pure-js-dual-list-box-component/
 */
$(function() {

    $.extend(Base, {
        Duallistbox : {

            create: function (selector, options) {

                var _i18n = {
                    language: {}
                };

                _i18n = $.extend(true, _i18n, Base.i18n.dualListbox);

                if (options._i18n !== undefined && options._i18n != null) {
                    _i18n = $.extend(true, _i18n, options._i18n);
                }

                var defaultOptions = {
                    addEvent: function(value) {},
                    removeEvent: function(value) {},
                    availableTitle: 'Origen',
                    selectedTitle: 'Destino',
                    addButtonText: '<i class="bi bi-chevron-right"></i>',
                    removeButtonText: '<i class="bi bi-chevron-left"></i>',
                    addAllButtonText: '<i class="bi bi-chevron-double-right"></i>',
                    removeAllButtonText: '<i class="bi bi-chevron-double-left"></i>',
                    searchPlaceholder: 'Buscar',
                    options: []
                };

                let finallyOptions = $.extend(true, defaultOptions, options);
                let dualListbox = new DualListbox(selector, finallyOptions);

                //Gurdar instancia
                $(selector).data('dualListboxInstance', dualListbox);

                //Estilos a pp
                $(".dual-listbox__container > div:not('.dual-listbox__buttons')").addClass('col-5');
                $(".dual-listbox__buttons").addClass('col-2');
                $(".dual-listbox__buttons").prop('style', 'margin: 0px; padding: 5%;');
                $(".dual-listbox__available").prop('style', 'width: 100%;');
                $(".dual-listbox__selected").prop('style', 'width: 100%;');

                return dualListbox;
            },

            _qxDuallistbox : function (duallistbox) {

                return {

                    ver : function () {

                        console.log("Base.Duallistbox 1.0");
                        console.log("Requiere: Base 1.0");
                    },
                    reload: function (url, postData, callBackFunction) {

                        //recuperando instancia
                        let dualListboxInstance = $(duallistbox).data('dualListboxInstance');

                        Base.ajax(
                            url,
                            postData,
                            function (data)
                            {

                                $("#subjectInstance").empty();
                                dualListboxInstance.available = [];
                                dualListboxInstance.selected = [];
                                dualListboxInstance.options = [];

                                $.each(data, function (i, item) {

                                    const option = '<option value="' + item.val + '" >' + item.txt + '</option>';
                                    duallistbox.append(option);

                                    dualListboxInstance._addOption( {
                                        'text': item.txt,
                                        'value': item.val
                                    });

                                });

                                dualListboxInstance.redraw();

                                if(callBackFunction != undefined && callBackFunction != null && $.isFunction(callBackFunction)) {

                                    return callBackFunction(data);
                                }
                            }
                        );
                    }
                }
            }
        }
    });

    $.fn.QxDuallistbox = function () {

        var duallistbox = this;

        return Base.Duallistbox._qxDuallistbox(duallistbox);
    }
});