import { Directive, model } from '@angular/core';

/**
 * Core directive that manages the expanded/collapsed state of a section.
 *
 * This directive serves as the foundation for the expandable system, providing state management
 * and a toggle function. It uses Angular's model input API for two-way binding.
 *
 * @example
 * ```html
 * <div uiExpandable [(uiExpanded)]="isExpanded">
 *   <!-- Content here -->
 * </div>
 * ```
 */
@Directive({ selector: '[uiExpandable]', exportAs: 'uiExpandable' })
export class ExpandableDirective {
  /**
   * Signal model that tracks and manages the expanded state.
   * Can be bound to with [(uiExpanded)] for two-way binding.
   *
   * @default false - Initially collapsed
   */
  expanded = model(false, { alias: 'uiExpanded' });

  /**
   * Toggles the expanded/collapsed state.
   */
  toggle() {
    this.expanded.update((expanded) => !expanded);
  }

  expand() {
    this.expanded.set(true);
  }

  collapse() {
    this.expanded.set(false);
  }
}
