import { Controller } from "@hotwired/stimulus"

export default class RuleFormController extends Controller {
  static targets = ["actionSelect", "addHeaderSection", "expirationCheckbox", "expirationField"]

  connect() {
    this.updateActionSections()
  }

  updateActionSections() {
    const selectedAction = this.actionSelectTarget.value

    // Hide all action-specific sections
    this.addHeaderSectionTarget.classList.add('hidden')

    // Show relevant section based on action
    switch(selectedAction) {
      case 'add_header':
        this.addHeaderSectionTarget.classList.remove('hidden')
        break
    }
  }

  toggleExpiration() {
    if (this.expirationCheckboxTarget.checked) {
      this.expirationFieldTarget.classList.remove('hidden')
    } else {
      this.expirationFieldTarget.classList.add('hidden')
      // Clear the datetime field when unchecked
      const datetimeInput = this.expirationFieldTarget.querySelector('input[type="datetime-local"]')
      if (datetimeInput) {
        datetimeInput.value = ''
      }
    }
  }
}