import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = ['tab', "tabLink", 'loadingIndicator']
  static classes = [ "activeTab", "inactiveTab", "activeTabLink"]

  connect() {
    this.showTab();
  }
  change(event) {
    // If target specifies an index, use that
    if (event.currentTarget.dataset.index) {
      this.index = event.currentTarget.dataset.index

    // If target specifies an id, use that
    } else if (event.currentTarget.dataset.id) {
      this.index = this.tabTargets.findIndex((tab) => tab.id == event.currentTarget.dataset.id)

    // Otherwise, use the index of the current target
    } else {
      this.index = this.tabTargets.indexOf(event.currentTarget)
    }
  }

  showTab() {
    this.tabTargets.forEach((tab, index) => {
      let tabLink = this.tabLinkTargets[index];
      if (index === this.index) {
        tab.classList.add(...this.activeTabClasses);
        if(this.hasActiveTabLinkClass) {
          tabLink.classList.add(...this.activeTabLinkClasses);
        }
        if(this.hasInactiveTabClass) {
          tab.classList.remove(...this.inactiveTabClasses)
        };
      }
      else {
        if(this.hasInactiveTabClass) {
          tab.classList.add(...this.inactiveTabClasses)
        }
        tab.classList.remove(...this.activeTabClasses)

        if(this.hasActiveTabLinkClass) {
          tabLink.classList.remove(...this.activeTabLinkClasses);
        }
      }
    })
    this.loadingIndicatorTarget.classList.remove('hidden');
  }

  get index() {
    return parseInt(this.data.get('index') || 0)
  }

  set index(value) {
    this.data.set('index', (value >= 0 ? value : 0))
    this.showTab()
  }
}