export class HeaderDrawerManager {
  private drawer!: HTMLElement;
  private expanded = false;
  private readonly expandedHeight = 24;
  private readonly duration = 200;

  init(container: HTMLElement): void {
    this.drawer = container.querySelector('swp-header-drawer')!;

    if (!this.drawer) console.error('HeaderDrawerManager: swp-header-drawer not found');
  }

  toggle(): void {
    this.expanded ? this.collapse() : this.expand();
  }

  expand(): void {
    if (this.expanded) return;
    this.expanded = true;
    this.animate(0, this.expandedHeight);
  }

  collapse(): void {
    if (!this.expanded) return;
    this.expanded = false;
    this.animate(this.expandedHeight, 0);
  }

  private animate(from: number, to: number): void {
    const keyframes = [
      { height: `${from}px` },
      { height: `${to}px` }
    ];
    const options: KeyframeAnimationOptions = {
      duration: this.duration,
      easing: 'ease',
      fill: 'forwards'
    };

    // Kun animér drawer - ScrollManager synkroniserer header-spacer via ResizeObserver
    this.drawer.animate(keyframes, options);
  }

  isExpanded(): boolean {
    return this.expanded;
  }
}