import React from 'react';
import classNames from 'classnames';
import styles from './Layers/index.less';
import { NodeDownstreamOutlined, NodeUpstreamOutlined, CheckSquareOutlined } from '@easyv/react-icons';
import { MenuActionState } from 'models/node';

function LayerMenu({
  visible,
  top,
  nodeDown,
  nodeUp,
  nodeCurrents,
  left,
  onSelectChange
}: {
  nodeDown: string[];
  nodeUp: string[];
  nodeCurrents: string[];
  visible: boolean;
  top: number;
  left: number;
  onSelectChange?: (type: string) => void;
}) {
  return (
    <div className={classNames(styles.menu, { [styles.show]: visible })} style={{ top, left }} onContextMenu={(e) => e.preventDefault()}>
      <ul>
        <li
          className={classNames({ [styles.disabled]: !nodeUp.length })}
          onClick={() => {
            onSelectChange?.(MenuActionState.NODE_UP);
          }}>
          <div className={styles.icon}>
            <NodeUpstreamOutlined />
          </div>
          <span>选择上游节点</span>
        </li>
        <li
          className={classNames({ [styles.disabled]: !nodeDown.length })}
          onClick={() => {
            onSelectChange?.(MenuActionState.NODE_DOWN);
          }}>
          <div className={styles.icon}>
            <NodeDownstreamOutlined />
          </div>
          <span>选择下游节点</span>
        </li>
        <li
          style={{
            display: nodeCurrents.some((id) => id.includes('event_')) ? 'none' : 'flex'
          }}
          onClick={() => {
            onSelectChange?.(MenuActionState.CANVAS_CHANGE);
          }}>
          <div className={styles.icon}>
            <CheckSquareOutlined />
          </div>
          <span>在画布编辑中选中</span>
        </li>
      </ul>
    </div>
  );
}

export default LayerMenu;
