import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = ['active', 'tab', 'content'];

    connect() {
        console.log('#tabs controller connected');
    }
    /**
     * 
     * @param {Event} event 
     */
    activate(event) {
        event.preventDefault();
        this.deactivate();
        const activeId = event.currentTarget.dataset.id;

        event.currentTarget.parentElement.classList.add('active');
        this.contentTargets.find(c => c.dataset.id === activeId)
            .classList.remove('d-hide');
    }

    reset() {
        this.deactivate();
        const activeId = this.activeTarget.dataset.id;

        this.activeTarget.classList.add('active');
        this.contentTargets.find(c => c.dataset.id === activeId)
            .classList.remove('d-hide');
    }

    deactivate() {
        this.tabTargets.forEach(tab => {
            tab.classList.remove('active');
        });

        this.contentTargets.forEach(content => {
            content.classList.add('d-hide');
        });
    }
}