import { Directive, inject, input } from '@angular/core';
import { ExpandableDirective } from './expandable.directive';

/**
 * Directive that turns an element into a toggle trigger for an ExpandableDirective.
 *
 * This directive must be used within an element that has the uiExpandable
 * directive applied. It adds click handling and proper accessibility attributes
 * to control the expanded/collapsed state.
 *
 * @example
 * ```html
 * <div uiExpandable>
 *   <button uiExpandableTrigger="section-id" #trigger="uiExpandableTrigger">
 *     {{ trigger.expanded() ? 'Hide' : 'Show' }} Content
 *   </button>
 * </div>
 * ```
 */
@Directive({
  selector: '[uiExpandableTrigger]',
  exportAs: 'uiExpandableTrigger',
  host: {
    '(click)': 'toggle()',
    '[attr.aria-expanded]': 'expanded()',
    'role': 'button',
  },
})
export class ExpandableTriggerDirective {
  /**
   * Reference to the parent ExpandableDirective that controls state
   * @private
   */
  #expandable = inject(ExpandableDirective, { host: true });

  /**
   * Toggles the expanded/collapsed state of the parent expandable section.
   */
  toggle() {
    this.#expandable.toggle();
  }

  /**
   * Returns the current expanded state as a signal.
   * Useful for conditionally showing content in the trigger based on state.
   *
   * @returns A signal with the current expanded state (boolean)
   */
  expanded() {
    return this.#expandable.expanded();
  }
}
