// Define two types of whitelists, each used for the dropdown suggestions menu, depending on the pattern (see seetings below) prefix
var whitelist_1 = [
    { id:100, value:'kenny', title:'Kenny McCormick'},
    { id:101, value:'cartman', title:'Eric Cartman' },
    { id:102, value:'kyle', title:'Kyle Broflovski' },
    { id:103, value:'token', title:'Token Black' },
    { id:104, value:'jimmy', title:'Jimmy Valmer' },
    { id:105, value:'butters', title:'Butters Stotch' },
    { id:106, value:'stan', title:'Stan Marsh' },
    { id:107, value:'randy', title:'Randy Marsh' },
    { id:108, value:'Mr. Garrison', title:'POTUS' },
    { id:109, value:'Mr. Mackey', title:"M'Kay" }
]

var whitelist_2 = [
  'Homer simpson', 
  'Marge simpson', 
  'Bart', 
  'Lisa', 
  'Maggie', 
  'Mr. Burns', 
  'Ned', 
  'Milhouse', 
  'Moe'
];

// initialize Tagify
var input = document.querySelector('textarea'),
    
    // init Tagify script on the above inputs
    tagify = new Tagify(input, {
    //  mixTagsInterpolator: ["{{", "}}"],
        mode: 'mix',  // <--  Enable mixed-content
        pattern: /@|#/,  // <--  Text starting with @ or # (if single, String can be used here)

        // Array for initial interpolation, which allows only these tags to be used
        whitelist: whitelist_1.concat(whitelist_2).map(function(item){ return typeof item == 'string' ? {value:item} : item}),

        dropdown : {
            enabled: 1,
            position: "text",
            highlightFirst: true  // automatically highlights first sugegstion item in the dropdown
        },
        callbacks: {
            add: console.log,  // callback when adding a tag
            remove: console.log   // callback when removing a tag
        }
    })


// A good place to pull server suggestion list accoring to the prefix/value
tagify.on('input', function(e){
    var prefix = e.detail.prefix;

    // first, clean the whitlist array, because the below code, while not, might be async,
    // therefore it should be up to you to decide WHEN to render the suggestions dropdown
    // tagify.settings.whitelist.length = 0;

    if( prefix ){
        if( prefix == '@' )
            tagify.whitelist = whitelist_1;

        if( prefix == '#' )
            tagify.whitelist = whitelist_2;

        if( e.detail.value.length > 1 )
            tagify.dropdown.show.call(tagify, e.detail.value);
    }

    console.log( tagify.value )
    console.log('mix-mode "input" event value: ', e.detail)
})

tagify.on('add', function(e){
    console.log(e)
})