// import { useDraggable } from '@/hooks/useDraggable';
import { getWorkspaceOverviewReq } from '@/services/workspace';
import { ExperimentInstance } from '@/types';
import { to } from '@/utils/promise';
import { Divider, Flex } from 'antd';
import { useEffect, useState } from 'react';
// import Draggable from 'react-draggable';
import AssetsManagement from './components/AssetsManagement';
import ExperimentChart, { type ExperimentStatistics } from './components/ExperimentChart';
import ExperitableTable from './components/ExperimentTable';
import QuickStart from './components/QuickStart';
// import RobotFrame from './components/RobotFrame';
import TotalStatistics from './components/TotalStatistics';
import UserPoints from './components/UserPoints';
import UserSpace from './components/UserSpace';
import WorkspaceIntro from './components/WorkspaceIntro';
import styles from './index.less';

type OverviewData = {
  workflowCount: number;
  runningExperimentInsCount: number;
  experimentInsStatus: ExperimentStatistics;
  latestExperimentInsList: ExperimentInstance[];
};

function Workspace() {
  const [overviewData, setOverviewData] = useState<OverviewData>();
  // const [robotFrameVisible, setRobotFrameVisible] = useState(false);
  // const { handleStart, handleStop, handleDrag, handleClick } = useDraggable(() =>
  //   setRobotFrameVisible((prev) => !prev),
  // );
  const users: number[] = new Array(8).fill(0);

  useEffect(() => {
    getWorkspaceOverview();
  }, []);

  // 获取工作空间概况
  const getWorkspaceOverview = async () => {
    const [res] = await to(getWorkspaceOverviewReq());
    if (res && res.data) {
      setOverviewData(res.data);
    }
  };

  return (
    <div className={styles.workspace}>
      <WorkspaceIntro></WorkspaceIntro>
      <Flex gap={'15px'} wrap>
        <div className={styles['workspace__overview']}>
          <div className={styles['workspace__overview__title']}>运行概览</div>
          <div className={styles['workspace__overview__content']}>
            <Flex align="center" className={styles['workspace__overview__content__statistics']}>
              <TotalStatistics
                icon={require('@/assets/img/workspace-pipeline.png')}
                title="流水线总数"
                count={overviewData?.workflowCount}
              />
              <Divider
                type="vertical"
                dashed
                style={{ color: '1px dashed rgba(96, 107, 122, 0.19)', height: 68, margin: 0 }}
              />
              <TotalStatistics
                icon={require('@/assets/img/workspace-experiment.png')}
                title="正在运行实例总数"
                count={overviewData?.runningExperimentInsCount}
              />
            </Flex>

            <ExperitableTable
              tableData={overviewData?.latestExperimentInsList || []}
            ></ExperitableTable>
            {overviewData?.experimentInsStatus && (
              <ExperimentChart chartData={overviewData?.experimentInsStatus}></ExperimentChart>
            )}
          </div>
        </div>
        <UserPoints />
      </Flex>
      <div className={styles['workspace__quick-start']}>
        <QuickStart></QuickStart>
        <div className={styles['workspace__user']}>
          <UserSpace users={users}></UserSpace>
          <AssetsManagement></AssetsManagement>
        </div>
      </div>
      {/* <Draggable onStart={handleStart} onStop={handleStop} onDrag={handleDrag} bounds="body">
        <img
          className={styles['workspace__robot-img']}
          src={require('@/assets/img/robot.png')}
          onClick={handleClick}
          draggable={false}
          alt=""
        ></img>
      </Draggable>

      <RobotFrame
        visible={robotFrameVisible}
        onClose={() => setRobotFrameVisible(false)}
      ></RobotFrame> */}
    </div>
  );
}

export default Workspace;
