import Header from "./components/header";
import Workspace from "./components/workspace";
import { useComponent } from "./hooks/useComponent";
import { useScreen } from "./hooks/useScreen"
import { useTables } from "./hooks/useTables";

function App() {

  const projectData = {
      id: "",
      title: "",
      detail: "",
      createdTime: "",
      updatedTime: "",
      screens: [
          {
              id: "screen1",
              components: [],
              index: 0,
              name: "screen1",
              projectId: ""
          }
      ],
      tables: []
  }
  
  const {
    screenState,
    screenActions,
    screenDispatch
  } = useScreen(projectData);
  
  const {
    componentState,
    componentActions,
    componentDispatch
  } = useComponent(screenState.curScreenIndex, screenState.curScreen, screenDispatch.setScreens);
  
  const {
    tableState,
    tableActions
  } = useTables(projectData);
  
  return (
    <div className="h-screen flex flex-col overflow-hidden">
      <Header projectData={{
        ...projectData, screens: screenState.screens, tables: tableState.tables
      }} />
      <div className="flex-1 overflow-hidden">
        <Workspace 
          screenStateAndActions={{screenActions, screenState, screenDispatch}}
          componentStateAndActions={{componentActions, componentState, componentDispatch}}
          tableStateAndActions={{tableState, tableActions}}
        />
      </div>
    </div>
  )
}

export default App