import {Controller} from '@hotwired/stimulus'

export default class CommentComponent extends Controller {
  static targets = ['tab', 'tabBarComponent']

  declare readonly commentComponentTarget: HTMLDivElement
  declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
  declare readonly tabTargets: [HTMLButtonElement]

  SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
  PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
  INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'

  connect() {
    for (const tab of this.tabTargets) {
      if (tab.hasAttribute('selected')) {
        tab.classList.add(...this.SELECTED_TAB_CLASSES)
      }
    }
  }

  toggleTab() {
    for (const tab of this.tabTargets) {
      if (tab.hasAttribute('selected')) {
        tab.removeAttribute('selected')
        tab.classList.remove(...this.SELECTED_TAB_CLASSES)
        this.toggleBackgrounds(tab)
      } else {
        tab.setAttribute('selected', 'true')
        tab.classList.add(...this.SELECTED_TAB_CLASSES)
        this.toggleBackgrounds(tab)
        if (tab.hasAttribute('data-public')) {
          document.getElementById('message_public')?.setAttribute('value', 'true')
        } else {
          document.getElementById('message_public')?.setAttribute('value', 'false')
        }
      }
    }
  }
  toggleBackgrounds(tab: HTMLButtonElement) {
    if (tab.hasAttribute('selected')) {
      if (tab.hasAttribute('data-public')) {
        // this.commentComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
        // this.commentComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
        this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
        this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
      } else {
        // this.commentComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
        // this.commentComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
        this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
        this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
      }
    }
  }
}