/*
 * @Author: Nian Yi
 * @Date: 2022-04-11 14:27:52
 * @LastEditTime: 2022-04-11 14:39:12
 * @LastEditors: Nian Yi
 * @Description:
 * @FilePath: /easyvadmin/src/scripts/components/EasyvNodeCard/Component.tsx
 * 奥利给
 */
// 节点卡片
import React from 'react';
import styles from './index.less';
import { ComponentsLightColored, ExclamationCircleOutlined } from '@easyv/react-icons';
import Actions from './Actions';
import Events from './Events';
import classnames from 'classnames';
import { State } from 'containers/nodes-edit/index';
import { Handle, Position } from '@easyv/react-flow-renderer';

export default function EasyvNodeCard({
  name,
  moduleName,
  active = false,
  state = State.NORM,
  events = [],
  actions = [],
  id,
  color = '#098a4c'
}: {
  id: string;
  name?: string;
  moduleName: string;
  color: string;
  state: State;
  events: any[];
  actions: any[];
  active: boolean;
}) {
  return (
    // styles.action - 选中状态
    // styles.hide - 隐藏状态
    // styles.error - 丢失
    // default_hidden - 默认隐藏
    // interactHidden - 交互隐藏
    <div
      className={classnames(styles.nodeCard, {
        [styles.action]: active,
        [styles.error]: state === State.ERROR,
        [styles.hide]: state === State.HIDDEN,
        [styles.defaultHide]: state === State.DEFAULT_HIDDEN,
        [styles.interactHidden]: state === State.INTERACT_HIDDEN
      })}>
      <div className={styles.typeColor} style={{ background: color }} />
      <div className={styles.title}>
        <div className={styles.left}>
          <span className={styles.icon}>
            <ComponentsLightColored />
          </span>
          <span className={styles.name} title={name}>
            {name}
          </span>
        </div>
        <div className={styles.right}>
          <Handle type="source" position={Position.Right} id={id}></Handle>
        </div>
      </div>
      <div className={styles.moduleName}>{moduleName}</div>

      {events.length ? (
        <div className={styles.events}>
          <div className={styles.identifying}>事件</div>
          <Events list={events} nodeId={id} />
        </div>
      ) : null}

      {actions.length ? (
        <div className={styles.actions}>
          <div className={styles.identifying}>动作</div>
          <Actions list={actions} nodeId={id} />
        </div>
      ) : null}

      <div className={styles.mask} />
      {state === State.ERROR ? (
        <div className={styles.errorIcon}>
          <ExclamationCircleOutlined />
        </div>
      ) : null}
    </div>
  );
}
