import RunDuration from '@/components/RunDuration';
import { ExperimentStatus } from '@/enums';
import { experimentStatusInfo } from '@/pages/Experiment/status';
import { PipelineNodeModelSerialize } from '@/types';
import { formatDate } from '@/utils/date';
import { CloseOutlined, DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
import { Drawer, Tabs, Typography } from 'antd';
import { useMemo } from 'react';
import ExperimentParameter from '../ExperimentParameter';
import ExperimentResult from '../ExperimentResult';
import LogList from '../LogList';
import styles from './index.less';

type ExperimentDrawerProps = {
  open: boolean;
  onClose: () => void;
  pipelineId: number; // 流水线 id
  experimentId: number; // 实验 id
  experimentName: string; // 实验 name
  instanceId: number; // 实验实例 id
  instanceName: string; // 实验实例 name
  instanceNamespace: string; // 实验实例 namespace
  instanceNodeData: PipelineNodeModelSerialize; // 节点数据，在定时刷新实验实例状态中不会变化
  workflowId?: string; // 实验实例工作流 id
  instanceNodeStatus?: ExperimentStatus; // 实例节点状态
  instanceNodeStartTime?: string; // 开始时间
  instanceNodeEndTime?: string; // 在定时刷新实验实例状态中，会经常变化
};

const ExperimentDrawer = ({
  open,
  onClose,
  pipelineId,
  experimentId,
  experimentName,
  instanceId,
  instanceName,
  instanceNamespace,
  instanceNodeData,
  workflowId,
  instanceNodeStatus,
  instanceNodeStartTime,
  instanceNodeEndTime,
}: ExperimentDrawerProps) => {
  // 如果性能有问题，可以进一步拆解
  const items = useMemo(
    () => [
      {
        key: '1',
        label: '日志详情',
        children: (
          <div className={styles['experiment-drawer__log']}>
            <LogList
              instanceName={instanceName}
              instanceNamespace={instanceNamespace}
              pipelineNodeId={instanceNodeData.id}
              workflowId={workflowId}
              instanceNodeStartTime={instanceNodeStartTime}
              instanceNodeStatus={instanceNodeStatus}
            ></LogList>
          </div>
        ),
        icon: <ProfileOutlined />,
      },
      {
        key: '2',
        label: '配置参数',
        icon: <DatabaseOutlined />,
        children: <ExperimentParameter nodeData={instanceNodeData} />,
      },
      {
        key: '3',
        label: '输出结果',
        children: (
          <ExperimentResult
            pipelineId={pipelineId}
            experimentId={experimentId}
            experimentName={experimentName}
            experimentInsId={instanceId}
            pipelineNodeId={instanceNodeData.id}
          ></ExperimentResult>
        ),
        icon: <ProfileOutlined />,
      },
    ],
    [
      instanceNodeData,
      instanceId,
      instanceName,
      instanceNamespace,
      instanceNodeStatus,
      workflowId,
      instanceNodeStartTime,
      experimentName,
      experimentId,
      pipelineId,
    ],
  );

  return (
    <Drawer
      rootStyle={{ marginTop: '111px' }}
      title="任务执行详情"
      placement="right"
      closeIcon={<CloseOutlined className={styles['experiment-drawer__close']} />}
      onClose={onClose}
      open={open}
      width={520}
      className={styles['experiment-drawer']}
      destroyOnClose={true}
      mask={false}
    >
      <div style={{ paddingTop: '15px' }}>
        <div className={styles['experiment-drawer__info']}>任务名称：{instanceNodeData.label}</div>
        <div className={styles['experiment-drawer__info']}>
          执行状态：
          {instanceNodeStatus ? (
            <>
              <div
                className={styles['experiment-drawer__status-dot']}
                style={{
                  backgroundColor: experimentStatusInfo[instanceNodeStatus]?.color,
                }}
              ></div>
              <span style={{ color: experimentStatusInfo[instanceNodeStatus]?.color }}>
                {experimentStatusInfo[instanceNodeStatus]?.label}
              </span>
            </>
          ) : (
            '--'
          )}
        </div>
        {instanceNodeData.message && (
          <div className={styles['experiment-drawer__info']}>
            <div style={{ flex: 'none' }}>消息：</div>
            <Typography.Text ellipsis={{ tooltip: instanceNodeData.message }}>
              {instanceNodeData.message ?? '--'}
            </Typography.Text>
          </div>
        )}
        <div className={styles['experiment-drawer__info']}>
          启动时间：{formatDate(instanceNodeStartTime)}
        </div>
        <div className={styles['experiment-drawer__info']}>
          耗时：
          <RunDuration createTime={instanceNodeStartTime} finishTime={instanceNodeEndTime} />
        </div>
      </div>
      <Tabs
        defaultActiveKey="1"
        items={items}
        className={styles['experiment-drawer__tabs']}
        style={{
          height: instanceNodeData.message ? 'calc(100% - 169px - 39px)' : 'calc(100% - 169px)',
        }}
      />
    </Drawer>
  );
};

export default ExperimentDrawer;
