import * as React from 'react';
import { PlumbEleNode, placement ,plumbNodeConnect } from 'amos-jsplumb';
import { PubSub } from 'ray-eventpool';
import classNames from 'classnames';
import ActionItem from './../../extra/ActionItem';
import { ELE_DEL_TOPIC, eleTypeTopic, completeItemTypeIcon } from './../../modelConf/stageConf';
import { sourceEndPoint, targetEndpoint } from './../../modelConf/plumbOptions';
import ElementEditor from './../../ElementEditor';

const DefaultNode = PlumbEleNode.DefaultNode;
const { Anchors } = placement;

@plumbNodeConnect({
  className: 'output-node-ele-inner',
  targetParams:{
    allowLoopback: false,
    // left
    anchor: Anchors.LeftMiddle,
    dropOptions: { hoverClass: 'drag-hover' },
    isTarget: true
  },
  endPointParams: [
    {
      params: targetEndpoint,
      referenceParams: {
        anchor: Anchors.LeftMiddle,
      }
    }
  ],
})

/**
 * 输出节点
 *
 * @class DataNodeEle
 * @extends {DefaultNode}
 */
export default function(options){
  const { type, nodeIcon } = options;
  const imgSrc = completeItemTypeIcon(nodeIcon);
  return class DataNodeEle extends React.Component {

    constructor(props) {
      super(props);
      this.currentLabel = this.props.config.label;//再界面上编辑过的值，用以双击打开配置界面时使用
      this.state = {
        active: false
      };
    }

    componentDidMount() {
    }

    dbClickTrigger = ({ id, config, parentConfig }) => {
      config.label =  this.currentLabel;
      PubSub.publish(eleTypeTopic.stage, {
        id,
        config,
        parentConfig,
        type
      });
    }

    clickTrigger = () => {
      // this.setState({
      //   active: true
      // });
    }

    remove = (e, { id }) => {
      PubSub.publish(ELE_DEL_TOPIC.trigger, {
        eleId: id
      });
    }

    refreshLabel = (label) => {
      this.currentLabel = label;
    }

    render() {
      const { active } = this.state;
      const { id, config, parentConfig } = this.props;
      const { style, label } = config;

      const cls = classNames({
        'node-content-wrapper': true,
        'node-wrapper-active': active
      });

      const wrapperCls = classNames('output-node-ele', nodeIcon);

      return (
        <div
          className={wrapperCls}
          onClick={this.clickTrigger}
          onDoubleClick={() => this.dbClickTrigger({ id, config, parentConfig })}
        >
          <div className={cls}>
            <div className="ele-node-icon"><img src={imgSrc} alt="" /></div>
            <div className="ele-node-content">
              <ElementEditor
                label={label}
                eleId={id}
                editCallBack={this.refreshLabel}
              />
            </div>
            <div className="ele-node-action">
              <ActionItem
                icon="delete"
                onClick={(e) => this.remove(e, { id })}
                tip="点击删除元素节点"
              />
            </div>
          </div>
        </div>
      );
    }
  };
}
