import React from 'react';
import styles from './index.less';
import { PullRequestLightColored } from '@easyv/react-icons';
import classNames from 'classnames';
import { Handle, Position } from '@easyv/react-flow-renderer';
import { State } from 'containers/nodes-edit/index';
import { ExclamationCircleOutlined } from '@easyv/react-icons';
import EasyvTooltip from 'components/EasyvTooltip';

function Condition({
  name,
  active = false,
  events = [],
  actions = [],
  reverse = true,
  conditionType = 'all',
  id,
  state,
  conditions = []
}: {
  conditions: any[];
  id: number;
  state: State;
  reverse: boolean;
  name?: string;
  conditionType: string;
  events: any[];
  actions: any[];
  active: boolean;
}) {
  return (
    <div
      className={classNames(styles.nodeCard, styles.conditionBox, {
        [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.title}>
        <div className={styles.left}>
          <span className={styles.icon}>
            <PullRequestLightColored />
          </span>
          <span>{name}</span>
        </div>
        <EasyvTooltip placement="top" title={reverse ? '自动模式启用，当不满足条件时重置动作' : '自动模式关闭'}>
          <span
            className={classNames(styles.switch, {
              [styles.switchReverse]: !reverse
            })}></span>
        </EasyvTooltip>
      </div>
      <div
        className={classNames({
          [styles.conditions]: conditions.length > 1
        })}
        data-type={conditionType === 'all' ? '且' : '或'}
        style={{
          paddingLeft: conditions.length > 1 ? 17 : 0
        }}>
        {conditions.map((d, index) => {
          return (
            <div className={styles.condition} key={d.id}>
              <span>
                {d.type === 'field'
                  ? d.field && d.expected
                    ? `${d.field}${d.compare}${d.expected}`
                    : '条件不完整'
                  : `${d.name}${index + 1}`}
              </span>
            </div>
          );
        })}
      </div>

      <div className={styles.actions}>
        <ul>
          {actions.map((d) => (
            <li key={d.id}>
              <Handle type="target" position={Position.Left} id={d.id}></Handle>
            </li>
          ))}
        </ul>
      </div>

      <div className={styles.events}>
        <ul>
          {events.map((d) => (
            <li key={d.id}>
              <Handle type="source" position={Position.Right} id={d.id}></Handle>
            </li>
          ))}
        </ul>
      </div>

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

export default Condition;
