import { Controller } from '@hotwired/stimulus'

export default class extends Controller {

    static classes = [ 'buttonActive' ]

    static targets = [ 'button', 'tab' ]

    static values = { activeTab: Number }

    select({ params: { tab } }) {
        let selectedTab = tab
        this.activeTabValue = selectedTab
        this.element.dispatchEvent(new CustomEvent('select', {
            detail: {
                tab: selectedTab
            }
        }))
    }

    activeTabValueChanged(activeTab) {
        this.tabTargets.forEach((element, index) => {
            element.classList.toggle('hidden', activeTab !== index)
        })

        this.buttonTargets.forEach((element, index) => {
            if (this.hasButtonActiveClass) {
                element.classList.toggle(this.buttonActiveClass, activeTab === index)
            }
        })
    }
}