import useKeyboardEvents from 'hooks/useKeyboardEvents'
import useLoadOnMount from 'hooks/useLoadOnMount'
import Canvas from './canvas/canvas'
import StatusBar from './status-bar'
import ToolsPanel from './tools-panel/tools-panel'
import StylePanel from './style-panel/style-panel'
import styled from 'styles'
import PagePanel from './page-panel/page-panel'
// import dynamic from 'next/dynamic'
// import ControlsPanel from './controls-panel/controls-panel'
// import { useSelector } from 'state'
// const CodePanel = dynamic(() => import('./code-panel/code-panel'))

export default function Editor() {
  useKeyboardEvents()
  useLoadOnMount()

  // const hasControls = useSelector(
  //   (s) => Object.keys(s.data.codeControls).length > 0
  // )

  return (
    <Layout>
      {/* <CodePanel /> */}
      <PagePanel />
      <Spacer />
      <StylePanel />
      <Canvas />
      <ToolsPanel />
      <StatusBar />
    </Layout>
  )
}

const Spacer = styled('div', {
  flexGrow: 2,
})

const Layout = styled('main', {
  position: 'fixed',
  overflow: 'hidden',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
  height: '100%',
  width: '100%',
  padding: '8px 8px 0 8px',
  zIndex: 200,
  display: 'flex',
  alignItems: 'flex-start',
  justifyContent: 'flex-start',
  pointerEvents: 'none',
  '& > *': {
    PointerEvent: 'all',
  },
})