// controllers/toggle_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["label", "dot", "background"]

  connect() {
    this.state = true
    this.update()
  }

  toggle() {
    this.state = !this.state
    this.update()
  }

  update() {
    if (this.state) {
      this.labelTarget.textContent = "ON"
      this.labelTarget.classList.add("text-notice")
      this.labelTarget.classList.remove("text-gray-400")

      this.dotTarget.classList.add("bg-notice")
      this.dotTarget.classList.remove("bg-gray-400")

      // this.backgroundTarget.classList.add("bg-on-content")
      // this.backgroundTarget.classList.remove("bg-off-content")
    } else {
      this.labelTarget.textContent = "OFF"
      this.labelTarget.classList.add("text-gray-400")
      this.labelTarget.classList.remove("text-notice")

      this.dotTarget.classList.add("bg-gray-400")
      this.dotTarget.classList.remove("bg-notice")

      // this.backgroundTarget.classList.add("bg-off-content")
      // this.backgroundTarget.classList.remove("bg-on-content")
    }
  }
}