import { Outlet } from 'react-router';
import { Suspense } from 'react';
import { Sidebar } from './Sidebar';
import { PersistentPlayer } from '../player/PersistentPlayer';
import { NowPlaying } from '../player/NowPlaying';
import { QueuePanel } from '../player/QueuePanel';
import { RadioController } from '../player/RadioController';
import { TrackInfoDrawer } from '../track/TrackInfoDrawer';
import { AddToPlaylistDialog } from '../track/AddToPlaylistDialog';
import { LoadingSkeleton } from '../common/LoadingSkeleton';

export function AppShell() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100vh',
        overflow: 'hidden',
      }}
    >
      <div className="app-body">
        <Sidebar />
        <main className="app-main">
          <div className="app-screen">
            <Suspense
              fallback={
                <div style={{ padding: '2rem' }}>
                  <LoadingSkeleton />
                </div>
              }
            >
              <Outlet />
            </Suspense>
          </div>
        </main>
        <QueuePanel />
        <TrackInfoDrawer />
      </div>
      <AddToPlaylistDialog />
      <PersistentPlayer />
      <NowPlaying />
      <RadioController />
    </div>
  );
}