import './bootstrap';
import Alpine from 'alpinejs'
import * as bootstrap from 'bootstrap';

window.Alpine = Alpine

Alpine.data('selectmenu', (datalist, selectedKey) => ({
    state: false,
    filter: '',
    list: JSON.parse(datalist),
    selectedkey: selectedKey,
    selectedlabel: null,
    init(){
        if (this.selectedkey) {
            this.selectedlabel = this.list[this.selectedkey];
        }
    },
    toggle: function () {
        this.state = !this.state;
        this.filter = '';
    },
    close: function () {
        this.state = false;
    },
    select: function (value, key) {
        if (this.selectedkey == key) {
            this.selectedlabel = null;
            this.selectedkey = null;
        } else {
            this.selectedlabel = value;
            this.selectedkey = key;
            this.state = false;
        }
    },
    isselected: function (key) {
        return this.selectedkey == key;
    },
    getlist: function () {
        if (this.filter == '') {
            return this.list;
        }
        var filtered = Object.entries(this.list).filter(([key, value]) => value.toLowerCase().includes(this.filter.toLowerCase()));

        var result = Object.fromEntries(filtered);
        return result;
    }
}))

Alpine.start()
window.bootstrap = bootstrap;


document.addEventListener("DOMContentLoaded", () => {
    Livewire.hook('component.initialized', (message, component) => {

    })
});
