// 数据流名称编辑通用组件
import React from 'react';

import {
  FlowStatusEnums,
  FlowStatusProps,
  FlowVersionStatusProps,
} from '@/interface';

// 样式
import cls from 'classnames';
import styles from './index.module.less';

const prefix = 'qx-flow-version';

interface FlowVersionProps {
  versionText?: string | number;
  status?: FlowVersionStatusProps | FlowStatusProps;
  statusEnums?: Record<string, string>; // 状态枚举
  handleClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void; // 调用方法
}

const FlowVersion: React.FC<FlowVersionProps> = (props) => {
  const { handleClick, status, versionText, statusEnums } = props;

  return (
    <>
      {versionText ||
      // @ts-ignore
      (statusEnums || FlowStatusEnums)[status || 'UNPUBLISHED'] ? (
        <div
          className={cls(
            styles[`${prefix}`],
            styles[`${(status || 'DRAFT').toLowerCase()}`],
            !!handleClick && versionText && Number(versionText) > 1
              ? styles['operational']
              : ' ',
            !!handleClick && versionText && Number(versionText) > 1
              ? ' qx-flow-version__default-operational'
              : ' qx-flow-version__default',
          )}
          onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
            if (handleClick && versionText && Number(versionText) > 1)
              handleClick(e);
          }}
          style={{
            minWidth:
              (!!versionText ? (versionText + '').length + 1 : 0) * 14 +
              (!!status ? 3 : 0) * 14 +
              'px',
          }}
        >
          {!!versionText ? <span>V&nbsp;{versionText}</span> : null}
          {!!status ? (
            // @ts-ignore
            <span>{(statusEnums || FlowStatusEnums)[status]}</span>
          ) : null}
        </div>
      ) : null}
    </>
  );
};

export default FlowVersion;