import { useRef } from 'react';
import { useDock, MusicPlayerHost } from 'officerdev';
import { Background } from './Background';
import { Header } from './Header';
import { Dock, ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS } from './Dock';
import { useIsTouch } from './useIsTouch';
import { usePageTitleSync } from '@/state/usePageTitle';

type DashboardLayoutProps = {
  children?: React.ReactNode;
};
export function DashboardLayout({ children }: DashboardLayoutProps) {
  const { items: visibleItems } = useDock(ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS);
  const isTouch = useIsTouch();
  usePageTitleSync();
  // The content region shrinks when the (in-flow) music dock takes its space; the nav dock measures its
  // reveal boundary from this element, so it always sits just above whatever's at the bottom.
  const regionRef = useRef<HTMLElement | null>(null);

  return (
    <div className="relative flex h-dvh flex-col overflow-hidden outline-none inset-0">
      <Header dockItems={visibleItems} />
      <section ref={regionRef} className="relative min-h-0 flex-1 snap-start overflow-hidden">
        <Background />
        {!isTouch && <Dock items={visibleItems} boundaryRef={regionRef} className="hidden md:flex" />}
        <div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-2 overflow-y-auto">{children}</div>
      </section>
      <MusicPlayerHost />
    </div>
  );
}
