import { Controller } from '@hotwired/stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

    static targets = [ 'label', 'dropdown', 'choice' ]
    static values = { placeholder: String }

    connect() {
        this.update()
        useClickOutside(this)
    }

    toggle() {
        this.dropdownTarget.classList.toggle('hidden')
    }

    update() {
        let labels = []

        this.choiceTargets.forEach((choice) => {
            if (choice.checked) {
                labels.push(choice.dataset.label)
            }
            this.labelTarget.innerText = labels.join(', ')
        })

        if (0 === labels.length) {
            this.labelTarget.innerText = this.placeholderValue
        }
    }

    clickOutside(e) {
        this.dropdownTarget.classList.toggle('hidden', true)
    }
}