import exportImg from '@/assets/img/tensor-board-export.png';
import pendingImg from '@/assets/img/tensor-board-pending.png';
import { LoadingOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import styles from './index.less';
// import stopImg from '@/assets/img/tensor-board-stop.png';
import terminatedImg from '@/assets/img/tensor-board-terminated.png';
import { TensorBoardStatus } from '@/enums';

type TensorBoardStatusInfo = {
  label: string;
  icon: string;
  classname: string;
};

const statusConfig: Record<TensorBoardStatus, TensorBoardStatusInfo> = {
  Unknown: {
    label: '未知',
    icon: terminatedImg,
    classname: '',
  },
  Terminated: {
    label: '未启动',
    icon: terminatedImg,
    classname: '',
  },
  Failed: {
    label: '失败',
    icon: terminatedImg,
    classname: 'tensorBoard-status__label--failed',
  },
  Pending: {
    label: '启动中',
    icon: pendingImg,
    classname: '',
  },
  Running: {
    label: '运行中',
    icon: exportImg,
    classname: 'tensorBoard-status__label--running',
  },
};

type TensorBoardStatusProps = {
  status?: TensorBoardStatus;
  onClick: () => void;
};

function TensorBoardStatusCell({
  status = TensorBoardStatus.Unknown,
  onClick,
}: TensorBoardStatusProps) {
  return (
    <div className={styles['tensorBoard-status']}>
      <div
        className={classNames(
          styles['tensorBoard-status__label'],
          styles[statusConfig[status].classname],
        )}
      >
        {statusConfig[status].label}
      </div>
      {statusConfig[status].icon ? (
        <>
          <div style={{ margin: '0 6px' }}>|</div>
          {status === TensorBoardStatus.Pending ? (
            <LoadingOutlined className={styles['tensorBoard-status__icon']} />
          ) : (
            <img
              className={styles['tensorBoard-status__icon']}
              src={statusConfig[status].icon}
              onClick={onClick}
              draggable={false}
              alt=""
            />
          )}
        </>
      ) : null}
    </div>
  );
}

export default TensorBoardStatusCell;
