import Tagify from '@yaireo/tagify';
import '@yaireo/tagify/dist/tagify.css';

document.addEventListener('livewire:init', () => {
    const Alpine = window.Alpine;

    const dropdownOptions = {
        classname: "color-blue",
        enabled: 0,
        maxItems: 10,
        position: "text",
        closeOnSelect: false,
        highlightFirst: true
    };

    Alpine.data('adminReleaseTags', () => ({
        tagify: null,

        init() {
            const el = this.$refs.tags;

            window.axios.get('/admin/tags').then((response) => {
                if (response.status != 200) {
                    return;
                }

                this.tagify = new Tagify(el, {
                    whitelist: response.data.tags,
                    dropdown: dropdownOptions
                });

                this.tagify.on('change', () => {
                    this.$wire.set('tags', this.tagify.value.map((t) => t.value));
                });
            }).catch((error) => {
                console.log(error);
            });
        }
    }));

    Alpine.data('adminReleaseStudio', () => ({
        tagify: null,

        init() {
            const el = this.$refs.studio;

            window.axios.get('/admin/studios').then((response) => {
                if (response.status != 200) {
                    return;
                }

                this.tagify = new Tagify(el, {
                    whitelist: response.data.studios,
                    dropdown: dropdownOptions
                });

                this.tagify.on('change', () => {
                    const values = this.tagify.value.map((t) => t.value);
                    this.$wire.set('studio', values.length ? values[values.length - 1] : '');
                });
            }).catch((error) => {
                console.log(error);
            });
        }
    }));
});