import {Controller} from '@hotwired/stimulus'

export default class extends Controller {

    static targets = ['fields', 'field', 'addButton', 'index']
    static values = {
        prototype: String,
        maxItems: Number,
        itemsCount: Number,
    }

    connect() {
        this.itemsCountValue = this.fieldTargets.length
    }

    addItem() {
        const index = this.fieldTargets.length + 1
        const prototype = JSON.parse(this.prototypeValue)
        const newField = prototype.replace(/__name__/g, index)
        this.fieldsTarget.insertAdjacentHTML('beforeend', newField)
        this.itemsCountValue++
    }

    removeItem(event) {
        this.fieldTargets.forEach(element => {
            if (element.contains(event.target)) {
                element.remove()
                this.itemsCountValue--
            }
        })
    }

    itemsCountValueChanged(itemsCount) {
        if (this.hasIndexTarget) {
            this.indexTargets.forEach((target, index) => {
                target.innerText = index + 1
            })
        }
        if (false === this.hasAddButtonTarget || 0 === this.maxItemsValue) {
            return
        }
        const maxItemsReached = itemsCount >= this.maxItemsValue
        this.addButtonTarget.classList.toggle('hidden', maxItemsReached)
    }

}