import React, { useState } from 'react';
import styles from './style/index.module.less';
import SideBar from './sideBar';
import LogBar from './logBar';
import RightSideBar from './rightSideBar';

interface Selected {
  currentPath?: string;
  currentKey?: string;
}

// 假设您有这些组件
const AppFlowComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用编排</div>;
const CompListComponent = () => <div style={{ height: '70vh', width: '100%' }}>组件列表</div>;
const AppInstanceComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用实例</div>;
const EventComponent = () => <div style={{ height: '70vh', width: '100%' }}>事件</div>;
const GlobalVarComponent = () => <div style={{ height: '70vh', width: '100%' }}>全局变量</div>;

function IDEContainer() {

  const [selected, setSelected] = useState<Selected>({});

  // 根据选中的菜单项渲染对应组件
  const renderContent = () => {
    switch (selected.currentPath) {
      case 'appFlow':
        return <AppFlowComponent />;
      case 'compList':
        return <CompListComponent />;
      case 'appInstance':
        return <AppInstanceComponent />;
      case 'event':
        return <EventComponent />;
      case 'globalVar':
        return <GlobalVarComponent />;
      default:
        return <AppFlowComponent />;
    }
  };
  return (
    <>
      <div className={styles.IDEContainer}>
        <SideBar
          onMenuSelect={(select) => setSelected(select)}
          selectedKey={selected.currentKey}
        />
        <div className={styles.content}>
          <div className={styles.mainContent}>
            {renderContent()}
          </div>
          <LogBar></LogBar>
        </div>

        <RightSideBar></RightSideBar>
      </div>
    </>
  );
}

export default IDEContainer;