import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = {
        formColor: { type: Array, default: [] } // Declares 'items' as an Array value
    }
    static targets = ["template", "container", "networkLogo", "button"]

    add(event) {
        event.preventDefault()
        event.stopPropagation()

        const content = this.#updateTemplateNetwork()

        this.buttonTarget.insertAdjacentHTML('beforebegin', content);
        // this.containerTarget.insertAdjacentHTML("beforeend", content)
    }

    #updateTemplateNetwork() {
        const nextIndex = this.networkLogoTargets.length
        const num_of_colors = this.formColorValue.length
        let colorIndex = 0
        if (nextIndex != 0) {
            colorIndex = nextIndex % num_of_colors
        }
        const newColor = this.formColorValue[colorIndex]
        return this.templateTarget.innerHTML
                            .replace(/NEW_RECORD/g, nextIndex)
                            .replace(/NEXT_COLOR/g, newColor)

    }
}