import { useParams } from 'react-router';
import { useAppStore } from './store';
import { lazy, useEffect } from 'react';
import { Left } from './panel/Left';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import { EditorHeader } from './panel/EditorHeader';

// import AppEditor from './edit/Editor';
const AppEditor = lazy(() => import('./edit/Editor'));

export const App = () => {
  const appStore = useAppStore();
  const param = useParams();
  const id = param.id as string;
  useEffect(() => {
    if (!id) return;
    appStore.getData(id);
  }, []);
  if (!id) return <div>Not Found</div>;
  return (
    <div className='w-full h-full flex bg-slate-200'>
      <PanelGroup autoSaveId='editor' direction='horizontal'>
        <Panel defaultSize={25}>
          <Left />
        </Panel>
        <PanelResizeHandle />
        <Panel defaultSize={75}>
          <div className='w-full h-full'>
            <EditorHeader />
            <AppEditor />
          </div>
        </Panel>
      </PanelGroup>
    </div>
  );
};
