import { FC } from "react"
import { leftPanelStyle } from "../../style"
import { ActionSpaceTree } from "./components/ActionSpaceTree"
import { ComponentSpaceTree } from "./components/ComponentSpaceTree"
import { GlobalsSpaceTree } from "./components/GlobalsSpaceTree"
import { LibrarySpaceTree } from "./components/LibrariesTree"
import { PageSpaceTree } from "./components/PageSpaceTree"
import { innerContainerStyle } from "./style"
import { useTheme } from "@mui/material"
import { StyleSpaceTree } from "../StyleSpaceTree"

 
export const DataWorkspace: FC = () => {
  const theme = useTheme()
  return ( 
    <div css={leftPanelStyle(theme)}>
      <div css={innerContainerStyle}>
        {/* <StyleSpaceTree />  */}
        {/* <PageSpaceTree /> */}
        <ComponentSpaceTree />
        <ActionSpaceTree />
        <GlobalsSpaceTree />
        <LibrarySpaceTree />
      </div>
    </div>
  )
}

DataWorkspace.displayName = "DataWorkspace"
