export class NavigationAnimator {
  constructor(
    private headerTrack: HTMLElement,
    private contentTrack: HTMLElement,
    private headerDrawer: HTMLElement | null
  ) {}

  async slide(direction: 'left' | 'right', renderFn: () => Promise<void>): Promise<void> {
    const out = direction === 'left' ? '-100%' : '100%';
    const into = direction === 'left' ? '100%' : '-100%';

    await this.animateOut(out);
    await renderFn();
    await this.animateIn(into);
  }

  private async animateOut(translate: string): Promise<void> {
    const animations = [
      this.headerTrack.animate(
        [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
        { duration: 200, easing: 'ease-in' }
      ).finished,
      this.contentTrack.animate(
        [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
        { duration: 200, easing: 'ease-in' }
      ).finished
    ];

    if (this.headerDrawer) {
      animations.push(
        this.headerDrawer.animate(
          [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
          { duration: 200, easing: 'ease-in' }
        ).finished
      );
    }

    await Promise.all(animations);
  }

  private async animateIn(translate: string): Promise<void> {
    const animations = [
      this.headerTrack.animate(
        [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
        { duration: 200, easing: 'ease-out' }
      ).finished,
      this.contentTrack.animate(
        [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
        { duration: 200, easing: 'ease-out' }
      ).finished
    ];

    if (this.headerDrawer) {
      animations.push(
        this.headerDrawer.animate(
          [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
          { duration: 200, easing: 'ease-out' }
        ).finished
      );
    }

    await Promise.all(animations);
  }
}
