import { Layout } from '@arco-design/web-react'
import { WorkspacePage } from './workspace-body'
import { WorkspaceInboxPage } from './workspace-inbox'
import { ProjectChannelPage } from './projects/project-channel-page'
import { ProjectRail } from './projects/project-rail'
import { ProjectSidebar } from './projects/project-sidebar'
import { ProjectStatusbar } from './projects/project-statusbar'
import { ProjectTopbar } from './projects/project-topbar'
import type { ChannelKey, Project, ProjectWorkspace, Theme, WorkbenchView } from './projects/project-types'

const { Content } = Layout

export function ProjectPage({
  activeView,
  activeWorkspace,
  workspaces,
  activeChannel,
  activeTaskID,
  theme,
  onSelectProject,
  onSelectWorkspace,
  onSelectWorkspaceInbox,
  onSelectChannel,
  onSelectItem,
  onOpenTask,
  onCloseTask,
  onToggleTheme,
}: {
  activeView: WorkbenchView
  activeWorkspace: ProjectWorkspace
  workspaces: ProjectWorkspace[]
  activeChannel: ChannelKey
  activeTaskID: string | null
  theme: Theme
  onSelectProject: (project: Project) => void
  onSelectWorkspace: () => void
  onSelectWorkspaceInbox: () => void
  onSelectChannel: (key: ChannelKey) => void
  onSelectItem: (title: string) => void
  onOpenTask: (project: Project, taskID: string) => void
  onCloseTask: () => void
  onToggleTheme: () => void
}) {
  const isProject = activeView === 'project'
  const projects = workspaces.map((workspace) => workspace.project)

  return (
    <Layout className="workbench-shell">
      <ProjectTopbar theme={theme} onToggleTheme={onToggleTheme} />

      <Layout className="workbench-main" hasSider>
        <ProjectRail
          activeProject={activeWorkspace.project}
          projects={projects}
          activeView={activeView}
          onSelectWorkspace={onSelectWorkspace}
          onSelectWorkspaceInbox={onSelectWorkspaceInbox}
          onSelectProject={onSelectProject}
        />

        {isProject && (
          <ProjectSidebar
            activeView={activeView}
            activeWorkspace={activeWorkspace}
            activeChannel={activeChannel}
            onSelectChannel={onSelectChannel}
            onSelectItem={onSelectItem}
          />
        )}

        <Content className="stage">
          {activeView === 'workspace' ? (
            <WorkspacePage workspaces={workspaces} onOpenTask={onOpenTask} />
          ) : activeView === 'workspace-inbox' ? (
            <WorkspaceInboxPage workspaces={workspaces} onSelectItem={onSelectItem} />
          ) : (
            <ProjectChannelPage
              activeChannel={activeChannel}
              activeWorkspace={activeWorkspace}
              activeTaskID={activeTaskID}
              onSelectItem={onSelectItem}
              onOpenTask={(taskID) => onOpenTask(activeWorkspace.project, taskID)}
              onCloseTask={onCloseTask}
            />
          )}
        </Content>

      </Layout>

      <ProjectStatusbar />
    </Layout>
  )
}