import { BaseNode } from "../../base";
import {FC} from "react";
import {ReactNodeProps} from "@logicflow/react-node-registry";
import {useDebounceFn} from "ahooks";
import classNames from "classnames";
import styles from "./index.module.scss";
import {Popconfirm, Tooltip} from "antd";
import {PlusCircleOutlined} from "@ant-design/icons";


export const ComponentNodeView: FC<ReactNodeProps> = (props) => {
  const { node: model, graph,  }= props;

  const properties = model.properties;

  const handleMousedown = () => {

  }

  const handleMouseup = () => {

  }

  const getLogo = () => {
    return 'https://s3-gzpu.didistatic.com/tiyan-base-store/suda/organizer/icons/page_init.png';
  }

  const getName = () => {
    return properties.label || properties.name;
  }

  const selectNode = () => {
    graph.eventCenter.emit(`node:update-model`, model)
  }

  const copyNode  = () => {
    graph.eventCenter.emit(`node:copy-node`, model)
  }

  const deleteNode = () => {
    graph.eventCenter.emit(`node:delete-node`, model)
  }

  const handleNext = (e: MouseEvent | any) => {
    e.stopPropagation();
    const nodeX = model.x
    const nodeY = model.y
    const x = nodeX + model.width / 2
    const y = nodeY
    const popoverItemKey = graph.popover.show({
      type: 'component-attr',
      key: model.id,
      delay: 100,
      placement: 'right',
      trigger: 'click',
      width: 16,
      height: 16,
      x,
      y,
      props: {
        showConnectBlock: true
      }
    })

    console.log(popoverItemKey)

  }

  const highHeightNode = model.properties.status === 'selected' || model.properties.status === 'hovered' || model.isHovered  || model.isSelected;
  const { run: onMouseOverFun } = useDebounceFn(
    (e) => {
      e.stopPropagation()
      graph.eventCenter.emit(`node:hover-node`, model)
    },
    { wait: 100 },
  );


  const { run: onMouseLeaveFun } = useDebounceFn(
    (e) => {
      e.stopPropagation()
      graph.eventCenter.emit(`node:cancel-hover-node`, model)
    },
    { wait: 100 },
  );

  return (
    <div className={classNames({
      [styles['node-wrap']]: true,
      [styles['base']]: true,
      [properties.status]: !!properties.status,
      [properties.executeStatus]: !!properties.executeStatus,
    })}
         onMouseEnter={onMouseOverFun}
         onMouseLeave={onMouseLeaveFun}
    >
      <div className={styles['node-title']} onMouseDown={handleMousedown} onMouseUp={handleMouseup} >
        <span className={styles['node-icon']}>
          <img src={getLogo()} alt=""/>
        </span>
        <span className={styles['node-name']}>{getName()}</span>
      </div>
      {
        highHeightNode && (
          <div className={styles['node-option']} onMouseDown={selectNode}>
            <Tooltip title="复制节点" className={styles['item']}>
              <span className={styles['option-icon']} onClick={copyNode} onMouseDown={() => {}}>
                <img src="https://s3-gzpu.didistatic.com/tiyan-base-store/suda/organizer/icons/node_copy.png" alt={''}/>
              </span>
            </Tooltip>
            <Tooltip title="删除节点" className={styles['item']}>
              <Popconfirm
                title=""
                description="确认删除该节点吗？"
                onConfirm={deleteNode}
                onCancel={() => {
                }}
                okText="确认"
                cancelText="取消"
              >
                <span className={styles['option-icon']} onMouseDown={() => {}}>
                  <img src="https://s3-gzpu.didistatic.com/tiyan-base-store/suda/organizer/icons/node_delete.png" alt={''}/>
                </span>
              </Popconfirm>
            </Tooltip>
          </div>
        )
      }
      <div className={styles['node-next']}>
        {
          highHeightNode && (
            <PlusCircleOutlined onMouseDown={handleNext} className={styles['next-icon']}/>
          )
        }
      </div>
    </div>
  );
};

class ComponentNodeModel extends BaseNode.model {
  public getOutlineStyle() {
    const style = super.getOutlineStyle();
    style.stroke = 'none';
    (style.hover as any).stroke = 'none';
    return style;
  }
  public getDefaultAnchor() {
    const {
      id,
      x,
      y,
      width,
    } = this;
    const anchors = [];
    anchors.push({
      x: x + width / 2,
      y,
      id: `${id}_outgoing`,
      type: "outgoing"
    });
    return anchors;
  }
  public getNodeName () {
    if (this.properties && this.properties.event && this.properties.event.keyDefine) {
      return this.properties.name + this.properties.event.keyDefine
    }
    return this.properties.name
  }
  public getNodeAbstract () {
    const title = '组件节点'
    const content = []
    const showButton = true
    content.push({
      desc: '组件节点',
      type: 'component'
    })
    return {
      title,
      content,
      showButton,
    }
  }
  public getNodeLogo () {
    return this.properties && this.properties.logo
  }
  public getNodeClassName () {
    return 'component'
  }
}

export default {
  type: 'ComponentNode',
  component: ComponentNodeView,
  model: ComponentNodeModel
}
