import { Controller } from '@hotwired/stimulus'

export default class extends Controller {

    static classes = [ 'hidden' ]
    static targets = [ 'container', 'checkboxGroup' ]
    static values = { visible: Boolean }

    connect() {
        this.updateVisibility()
    }

    check() {
        this.updateVisibility()
    }

    updateVisibility() {
        if (!this.hasCheckboxGroupTarget) {
            return
        }

        const checkboxes = this.checkboxGroupTarget.querySelectorAll('input[type="checkbox"]')
        const hasChecked = Array.from(checkboxes).some(checkbox => checkbox.checked)
        this.visibleValue = hasChecked
    }

    visibleValueChanged(visible) {
        if (this.hasContainerTarget) {
            this.containerTarget.classList.toggle(this.hiddenClass, false === visible)
        }
    }
}