'use strict';

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Layout, Pagination, Input } from 'antd';
import { CloseCircleOutlined, CheckOutlined } from '@ant-design/icons';
import MonitorDag from '../src/index.tsx';
import mockData from './mock_data/data';
import _ from 'lodash';
import 'antd/dist/antd.css';
import './index.less';

const { Header } = Layout;
const { Search } = Input;

const edgeMenu = [{
  key: 'detail',
  title: '线段信息',
  onClick: (key, data) => {
    console.log('click detail info', data)
  }
}, {
  key: '监控流程',
  render: (key, data) => {
    return <span>监控流程</span>
  },
  onClick: (key, data) => {
    console.log('monitor edge', data);
  }
}]

const groupMenu = [{
  key: 'detail',
  title: '节点组信息',
  onClick: (key, data) => {
    console.log('click detail info')
  }
}, {
  key: 'run',
  render: (key, data) => {
    return <span>节点运行</span>
  },
  onClick: (key, data) => {
    console.log('run node');
  }
}]
const Demo = () => {
  const [canvasData, setCanvasData] = useState(mockData);
  const nodeMenu = [{
    key: 'detail',
    title: '节点信息',
    onClick: (key, data) => {
      console.log('click detail info');
    }
  }, {
    key: 'run',
    render: (key, data) => {
      return <span>节点运行</span>
    },
    onClick: (key, data) => {
      console.log('run node');
    }
  }];
  return <MonitorDag
    data={canvasData}
    nodeMenu={nodeMenu}
    edgeMenu={edgeMenu}
    groupMenu={groupMenu}
    config={{
      focusCenter: true,
      direction: 'top-bottom',
      autoLayout: {
        enable: false,
        isAlways: false,
      },
      labelRender: (label, info) => {
        return label;
      },
      labelTipsRender: (label, info) => {
        return `${label}: 自定义label tips`;
      },
      nodeRender: (nodeOpts) => {
        return (
          <span className="node-text">{nodeOpts.title + nodeOpts.id + nodeOpts.status}</span>
        )
      },
      // diffOptions: ['status'],
      // statusNote: {
      //   notes: [{
      //     code: 'fail',
      //     render: () => {
      //       return <span><CloseCircleOutlined />失败</span>
      //     }
      //   }, {
      //     code: 'success',
      //     render: () => {
      //       return <span><CheckOutlined />成功</span>
      //     }
      //   }]
      // },
      nodeTipsRender: (nodeOpts) => {
        return <span>{nodeOpts.title}: 自定义节点tips</span>
      },
      endpointTipsRender: (pointOpts) => {
        return <span>自定义锚点tips</span>
      },
      group: {
        enablePagination: true,
        enableSearch: true
      },
      minimap: {
        enable: true,
        config: {
          nodeColor: 'rgba(216, 216, 216, 0.13)',
          activeNodeColor: '#F66902',
          viewportStyle: {
            'background-color': 'rgba(216, 216, 216, 0.07)'
          },
          groups: mockData.groups,
          nodes: mockData.nodes
        }
      },
    }}
  />
}

ReactDOM.render((
  <Router>
    <Layout>
      <Header className='header'>DTDesign-React运维/监控图</Header>
      <Layout>
        <Demo />
      </Layout>
    </Layout>
  </Router>
), document.getElementById('main'));