
import IGDATAPOOLFE from '@dp/ig_datapool_fe.js';
import { multipleSelect } from '@dp/multiple-select-vanilla';
const multipleSelectVanillaPlugin = {
    initFields(form) {
        this.init(form);
    },
    init(form) {
	form.querySelectorAll('.dp-select-checkbox').forEach(function(el, index) {
	    if (!el.id) { el.id = 'ms-select-' + index; }
	    const selector = '#' + el.id;
	    const ms = multipleSelect(selector, {
		filter: el.dataset.filter == 1,
		classes: el.classes,
		placeholder: el.dataset.textsPlaceholder,
		formatCountSelected: (o,t) => {
		    return el.dataset.textCountSelected
			.replace('#o', o)
			.replace('#t', t);
		},
		formatAllSelected: () => {
		    return el.dataset.textAllSelected;
		},
		filterPlaceholder: el.dataset.textsFilterPlaceholder,
		width: el.dataset.buttonWidth,
		minimumCountSelected: el.dataset.maxSelected,
		
		onCheckAll: function() {
		    el.nextElementSibling.classList.add('selected');
		},
		onUncheckAll: function() {
		    el.nextElementSibling.classList.remove('selected');
		},
		onClick: function(view) {
		    const selectedCount = ms.getSelects().length;
		    const button = el.nextElementSibling;
		    if (selectedCount > 0) {
			button.classList.add('selected');
		    } else {
			button.classList.remove('selected');
		    }
		}
	    });
	});
    }
};

IGDATAPOOLFE.addPlugin('multipleSelectVanilla', multipleSelectVanillaPlugin);
export default multipleSelectVanillaPlugin;

