import { useState } from 'react';
import NetworkViewer from './NetworkViewer.tsx';
import Sidebar from './Sidebar.tsx';
import useAppLogic from './useAppLogic.ts';
import DataViewer from './DataViewer.tsx';
import LoadingScreen from './ui/LoadingScreen.tsx';
import Tabs from './ui/Tabs.tsx';

export default function App() {

  const app = useAppLogic();

  const tabs = ["Data", "Network"] as const;
  const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>('Data');

  if (!app.backendReady) {
    return <LoadingScreen message="Loading" />
  }

  return (
    <div className="min-h-0 min-w-0 grid grid-cols-[2fr_1fr] h-dvh">

      <div>
        <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
        {activeTab === 'Data' && (
          <DataViewer 
            onGetRandomSample={app.getRandomSample}
            imageUrl={app.sampleImageUrl}
            label={app.sampleLabel}
          />
        )}
        {activeTab === 'Network' && (
          <NetworkViewer 
          />
        )}
      </div>

      <Sidebar 
        onImageFolderUpload={app.onImageFolderUpload}
      />
    </div>
  );
};