import { ReactFlowProvider } from '@xyflow/react';
import './App.css';
import { CanvasBuilder } from './Canvas';
import { Tabs, TabsTrigger, TabsContent, TabsList } from './components/ui/tabs';
import { Config } from './Config';
import { useStateStore } from './lib/state';
import { useEffect } from 'react';
import { Toaster } from './components/ui/toaster';
import { Header } from './Header';

export default function App() {
  return (
    <ReactFlowProvider>
      <Header />
      <AppImpl />
      <Toaster />
    </ReactFlowProvider>
  )
}

function AppImpl() {
  const store = useStateStore();
  useEffect(() => {
    setTimeout(async () => await store.refreshEnv(), 1);
  }, [store])
  return (
      <Tabs defaultValue="canvas">
        <TabsList>
          <TabsTrigger value="canvas">Canvas</TabsTrigger>
          <TabsTrigger value="config">Config</TabsTrigger>
        </TabsList>
        <TabsContent value="canvas">
          <CanvasBuilder />
        </TabsContent>
        <TabsContent value="config">
          <Config />
        </TabsContent>
      </Tabs>
  );
}