import React from 'react';
import { Node } from '@antv/x6';
// import styled from 'styled-components'
import '@antv/x6-react-shape';
import scriptLogo from '../style/img/script.png';
import datasourceLogo from '../style/img/datasource.png';
import successNode from '../style/img/success_node.png';
import warningNode from '../style/img/warning_node.png';
import undoneNode from '../style/img/default_node.png';
import runningNode from '../style/img/running.png';
import outputLogo from '../style/img/output.png';

interface NodeStatus {
  id: string;
  status: 'default' | 'success' | 'failed' | 'running' | 'undone';
  type: 'script' | 'datasource' | 'outputsource';
  label?: string;
  nodeName: string;
}

const image = {
  scriptLogo,
  datasourceLogo,
  successNode,
  warningNode,
  undoneNode,
  runningNode,
  outputLogo
};

export default class AlgoNode extends React.Component<{ node?: Node }> {
  shouldComponentUpdate() {
    const { node } = this.props;
    if (node) {
      if (node.hasChanged('data')) {
        return true;
      }
    }
    return false;
  }

  render() {
    const { node } = this.props;
    const data = node?.getData() as NodeStatus;
    const { label, status = 'default', type, nodeName = '' } = data;

    return (
      <div className={`node ${status}`}>
        {type === 'script' && <img src={image.scriptLogo} alt="scriptLogo" />}
        {type === 'datasource' && (
          <img src={image.datasourceLogo} alt="datasourceLogo" />
        )}
        {type === 'outputsource' && (
          <img src={image.outputLogo} alt="outputLogo" />
        )}
        <div className="label">
          <div>{label}</div>
          <div className="node_name">{nodeName}</div>
        </div>
        <div className="status">
          {status === 'undone' && <img src={image.undoneNode} alt="未执行" />}
          {status === 'success' && (
            <img src={image.successNode} alt="执行成功" />
          )}
          {status === 'failed' && (
            <img src={image.warningNode} alt="执行失败" />
          )}
          {status === 'running' && <img src={image.runningNode} alt="执行中" />}
        </div>
      </div>
    );
  }
}

/*
// 初始化节点/边
const init = (data: Cell.Metadata[]) => {
  const cells: Cell[] = []
  data.forEach((item) => {
    if (item.shape === 'dag-node') {
      cells.push(graph.createNode(item))
    } else {
      cells.push(graph.createEdge(item))
    }
  })
  graph.resetCells(cells)
}

// 显示节点状态
const showNodeStatus = async (statusList: NodeStatus[][]) => {
  const status = statusList.shift()
  status?.forEach((item) => {
    const { id, status } = item
    const node = graph.getCellById(id)
    const data = node.getData() as NodeStatus
    node.setData({
      ...data,
      status: status,
    })
  })
  setTimeout(() => {
    showNodeStatus(statusList)
  }, 3000)
}

// 请求节点数据
fetch('../data/dag.json')
  .then((response) => response.json())
  .then((data) => {
    init(data)
    // showNodeStatus(nodeStatusList)
    graph.centerContent()
  })
 */
