/**
 * TagsInput Component Module
 */
globalThis.Component.register('TagsInput', container => {
    container._thisObj = container;
        container.addEventListener('bind', e => {
                container.state.tags = Array.isArray(e.detail) ? e.detail : []
        })
}, globalThis.Util.makeDom(/*html*/`
<div class="form-control d-flex flex-wrap gap-1 align-items-center" style="min-height:38px;cursor:text">
  <template $each="this.state.tags">
    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown='${globalThis.Util.getFunctionBody(function (event) {
                if (['Backspace', 'Delete'].includes(event.key)) {
                        event.preventDefault()
                        this.state.tags.splice(index, 1)
                        this.state.tags = this.state.tags
                        this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
                        Promise.resolve().then(() => {
                                const buttons = globalThis.$$(this, 'button');
                                (buttons.length > 0 ? buttons[index > 0 ? index - 1 : 0] : globalThis.$(this, 'input')).focus()
                        })
                }
        })}' $text="item"></button>
  </template>
  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onchange="event.stopPropagation()" $oninput="event.stopPropagation()" $onkeydown='${globalThis.Util.getFunctionBody(function (event) {
                if (event.isComposing) return
                if (['Enter', ',', ' '].includes(event.key)) {
                        event.preventDefault()
                        const v = thisNode.value.trim()
                        if (v && !this.state.tags.includes(v)) {
                                this.state.tags.push(v)
                                this.state.tags = this.state.tags
                                this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
                        }
                        thisNode.value = ''
                }
        })}'>
</div>
`), globalThis.Util.makeDom(/*html*/`<style>TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}</style>`))

if (globalThis.AutoForm) {
    globalThis.AutoForm.register('TagsInput')
}
