import { EditorView } from "@aitube/clapper-services"

import { useEditors } from "@/services"

import { EditorsSideMenu } from "../toolbars/editors-menu/EditorsSideMenu"

import { ScriptEditor } from "./ScriptEditor"
import { useTheme } from "@/services/ui/useTheme"
import { EntityEditor } from "./EntityEditor"
import { ProjectEditor } from "./ProjectEditor"
import { SegmentEditor } from "./SegmentEditor"

export function Editors() {
  const theme = useTheme()
  const view = useEditors(s => s.view)

  return (
    <div className="flex flex-row h-full w-full overflow-hidden">
      <EditorsSideMenu />
      <div className="flex flex-row h-full w-full overflow-hidden"
        style={{
          background: theme.editorBgColor || theme.defaultBgColor || '#000000'
        }}>
        {view === EditorView.SCRIPT 
          ? <ScriptEditor />
          : view === EditorView.PROJECT
          ? <ProjectEditor />
          : view === EditorView.ENTITY
          ? <EntityEditor />
          : view === EditorView.SEGMENT
          ? <SegmentEditor />
          : <div>TODO</div>}
      </div>
    </div>
  )
}