let tagify;

window.addEventListener('remove', function () {
    if (tagify && tagify.value.length > 0) {
        tagify.removeTag(tagify.value[tagify.value.length - 1].value);
    }
});

document.addEventListener('DOMContentLoaded', function () {
    initializeTagify();

    // Listen for custom event to update Tagify
    window.addEventListener('tagifyChange', function (e) {
        if (tagify) {
            tagify.loadOriginalValues(e.detail.tagsArray);
        }
    });

    window.Livewire.on('disableSelect', () => {
        document.getElementById('select-translation').style.opacity = '0.4';
        document.getElementById('select-translation').style.cursor = 'pointer';
        document.getElementById('select-translation').style.pointerEvents = 'none';
        document.getElementById('input-translation').style.opacity = '1';
    });

    window.Livewire.on('disableInput', () => {
        document.getElementById('input-translation').style.opacity = '0.4';
        document.getElementById('select-translation').style.cursor = 'default';
        document.getElementById('select-translation').style.pointerEvents = 'auto';
        document.getElementById('select-translation').style.opacity = '1';
    });
});

function initializeTagify() {
    const input = document.getElementById('tags');

    // Destroy existing Tagify instance if it exists
    if (tagify) {
        tagify.destroy();
    }

    tagify = new Tagify(input, {
        pattern: /^.{3,80}$/, // max 80 characters, make sure also validation rule in Model is equally set
        maxTags: 50,
        autocapitalize: true,
        id: 'skillTags',
        whitelist: JSON.parse(input.dataset.suggestions),
        enforceWhiteList: false,
        backspace: false,
        editTags: false,
        addTagOn: ['blur', 'enter', 'tab'],
        autoComplete: {
            rightKey: true,
            tabKey: true,
        },
        dropdown: {
            classname: 'bg-theme-brand text-white',
            maxItems: 10, // maximum allowed rendered suggestions
            classname: 'readonlyMix', // Foreign tags are readonly and have a distinct appearance
            enabled: 3, // characters typed to show suggestions on focus
            position: 'text', // place the dropdown near the typed text
            closeOnSelect: true, // don't hide the dropdown when an item is selected
            highlightFirst: true, // highlight / suggest best match
        },
    });

    
    tagify.on('dblclick', onChange);


    tagify.on('focus', () => {
        Livewire.dispatch('tagifyFocus');
    });


    tagify.on('blur', () => {
        Livewire.dispatch('tagifyBlur');
    });
    

    function onChange(e) {
        const component = Livewire.find(input.closest('[wire\\:id]').getAttribute('wire:id'));
        component.set('tagsArray', e.target.value);
    }

    function onLoaded(e) {
        const tagsInput = document.getElementById('tags');
        if (tagsInput) {
            tagsInput.style.display = 'block';
        }
        onChange(e);
    }
    

    function onReloadPage() {
        window.location.reload();
    }

    // input.addEventListener('change', onChange);
    window.addEventListener('load', onLoaded);
    window.addEventListener('reloadPage', onReloadPage);
}

