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

const taginput = document.querySelector("#tags");
const studioinput = document.querySelector("#studio");
const episode_id = document.getElementById('e_id').value;

// Get Tags from API
window.axios.get('/admin/tags/' + episode_id).then(function (response) {
    if (response.status != 200) {
        return;
    }

    var tagify = new Tagify(taginput, {
        whitelist: response.data.tags,
        dropdown: {
            classname: "color-blue",
            enabled: 0,              // show the dropdown immediately on focus
            maxItems: 10,
            position: "text",         // place the dropdown near the typed text
            closeOnSelect: false,          // keep the dropdown open after selecting a suggestion
            highlightFirst: true
        }
    });

    tagify.addTags(response.data.episodetags);
}).catch(function (error) {
    console.log(error);
});

// Get Studio from API
window.axios.get('/admin/studio/' + episode_id).then(function (response) {
    if (response.status != 200) {
        return;
    }

    var tagify = new Tagify(studioinput, {
        whitelist: response.data.studios,
        dropdown: {
            classname: "color-blue",
            enabled: 0,              // show the dropdown immediately on focus
            maxItems: 10,
            position: "text",         // place the dropdown near the typed text
            closeOnSelect: false,          // keep the dropdown open after selecting a suggestion
            highlightFirst: true
        }
    });

    tagify.addTags(response.data.episodestudios);
}).catch(function (error) {
    console.log(error);
});