Calendar/src/core/ScrollManager.ts

export class ScrollManager {
  private scrollableContent!: HTMLElement;
  private timeAxisContent!: HTMLElement;
  private calendarHeader!: HTMLElement;
  private headerDrawer!: HTMLElement;
  private headerViewport!: HTMLElement;
  private headerSpacer!: HTMLElement;
  private resizeObserver!: ResizeObserver;

  init(container: HTMLElement): void {
    this.scrollableContent = container.querySelector('swp-scrollable-content')!;
    this.timeAxisContent = container.querySelector('swp-time-axis-content')!;
    this.calendarHeader = container.querySelector('swp-calendar-header')!;
    this.headerDrawer = container.querySelector('swp-header-drawer')!;
    this.headerViewport = container.querySelector('swp-header-viewport')!;
    this.headerSpacer = container.querySelector('swp-header-spacer')!;

    this.scrollableContent.addEventListener('scroll', () => this.onScroll());

    // Synkroniser header-spacer højde med header-viewport
    this.resizeObserver = new ResizeObserver(() => this.syncHeaderSpacerHeight());
    this.resizeObserver.observe(this.headerViewport);
    this.syncHeaderSpacerHeight();
  }

  private syncHeaderSpacerHeight(): void {
    // Kopier den faktiske computed height direkte fra header-viewport
    const computedHeight = getComputedStyle(this.headerViewport).height;
    this.headerSpacer.style.height = computedHeight;
  }

  private onScroll(): void {
    const { scrollTop, scrollLeft } = this.scrollableContent;

    // Synkroniser time-axis vertikalt
    this.timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;

    // Synkroniser header og drawer horisontalt
    this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`;
    this.headerDrawer.style.transform = `translateX(-${scrollLeft}px)`;
  }
}