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 {
    screenData,
    screenActions,
    screenDispatch
  } = useScreen(projectData);
  
  const {
    componentData,
    componentActions,
    componentDispatch
  } = useComponent(screenData.curScreenIndex, screenData.curScreen, screenDispatch.setScreens);
  
  const {
    tableData,
    tableActions
  } = useTables(projectData);
  
  return (
    <div className="h-screen flex flex-col overflow-hidden">
      <Header projectData={{
        ...projectData, screens: screenData.screens, tables: tableData.tables
      }} />
      <div className="flex-1 overflow-hidden">
        <Workspace 
          screenDataAndActions={{screenActions, screenData, screenDispatch}}
          componentDataAndActions={{componentActions, componentData, componentDispatch}}
          tableDataAndActions={{tableData, tableActions}}
        />
      </div>
    </div>
  )
}

export default App