import React from "react";
import { Table, message } from 'antd';
import { MainAreaWidget, ReactWidget } from '@jupyterlab/apputils';
import type { ColumnsType } from 'antd/es/table';
import { JupyterFrontEnd } from '@jupyterlab/application';
import { dagDataIcon } from './icons';
import MediateDataInfo from './MediateDataInfo'
import { getIntermediate } from "./request";


interface DataType {
  key: string;
  name: string;
  node_uuid: string;
  create_time: string,
  size: string;
}

export default class ToolBar extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      tableData: []
    }
  }

  // 查看中间表数据
  CheckDataInfo(key: any){
    const dataInfo = this.state.tableData[key]
    const widget = new MainAreaWidget({
      content: ReactWidget.create(<MediateDataInfo dataInfo={dataInfo}/>)
    });
    widget.title.label = dataInfo.name;
    widget.title.icon = dagDataIcon;
    const app: JupyterFrontEnd = (window as any).jupyterlab;
    app.shell.add(widget, 'main');
  }

  columns: ColumnsType<DataType> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '所属节点',
      dataIndex: 'node_uuid',
      key: 'node_uuid',
    },
    {
      title: '占用内存',
      dataIndex: 'size',
      key: 'size',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <a style={{color: '#147BD1', textDecorationLine: 'underline'}} onClick={() => {this.CheckDataInfo(record.key)}}>查看</a>
      ),
    },
  ];

  async componentDidMount(){
    console.log('componentDidMount')
    const { data } = await getIntermediate({
      project_id: 'test',
      user_id: 'test',
      dag_uuid: 'test'
    })
    if (data.code === 200) {
      this.setState({tableData: data.data})
    } else {
      message.error('加载数据失败')
    }
  }

  render() {
    return (
      <div className="mediate-table">
        <Table bordered columns={this.columns} dataSource={this.state.tableData.map((item: any, index: any) => {
          return {
            key: index,
            ...item,
          }
        })} />
      </div>
    )
  }
}