import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { Button, Empty, Space, Spin, Tag, Descriptions } from 'antd';
import '../style.less';
import { ProTable } from '@ant-design/pro-table';
import { render } from 'react-dom';
import { Link } from 'react-router-dom';

const ProtocolInfo = (props) => {
    const { dispatch, actions, productId, product, products, loading } = props

    const { meta } = actions;

    useEffect(() => {
        if (!!productId) {
            dispatch(meta.getProduct(productId))
        }
    }, []);

    const columns = [{
        title: '能力',
        dataIndex: 'cmname'
    }, {
        title: '描述',
        dataIndex: 'cmdesc'
    }, {
        title: '接口',
        dataIndex: 'iname'
    }, {
        title: '协议名',
        dataIndex: 'pmdesc'
    }, {
        title: '协议',
        dataIndex: 'pmname',
        render: (_, item) => {
            return <a href={`protocol/${item.pmname}`}>{item.pmname}</a>;
        },
    },
    ]

    const actionRef = useRef();
    return (
        <Spin spinning={loading}>
            <Descriptions title="Product Info" bordered>
                <Descriptions.Item label="ID" span={3} >{product?.Id}</Descriptions.Item>
                <Descriptions.Item label="名称" span={2}>{product?.Name}</Descriptions.Item>
                <Descriptions.Item label="型号" span={1}>{product?.Model}</Descriptions.Item>
                <Descriptions.Item label="描述" span={3}>{product?.Desc}</Descriptions.Item>
                <Descriptions.Item label="更新时间" span={3}>{product?.UpdatedAt}</Descriptions.Item>
                <Descriptions.Item label="创建时间" span={3}>{product?.CreatedAt}</Descriptions.Item>
                <Descriptions.Item label="所属公司" >{product?.Company}</Descriptions.Item>
                <Descriptions.Item label="创建用户" >{product?.Username}</Descriptions.Item>
                <Descriptions.Item label="资源类型" span={3}>{product?.FilterResource}</Descriptions.Item>
            </Descriptions>
            <h3>能力集合</h3>
            <ProTable
                columns={columns}
                actionRef={actionRef}
                dataSource={products}
                options={false}
                toolBarRender={false}
                search={false}

            >
            </ProTable>
        </Spin>
    )
}

function mapStateToProps(state) {
    const { auth, global, product } = state;
    console.log(product)
    let raw = product
    let p = {}
    if (product && product.data && (product.data.data ?? []).length > 0) {
        p = product.data.data[0];
    }
    console.log(raw.data?.data ?? [])

    return {
        user: auth.user,
        actions: global.actions,
        loading: product.isRequesting,
        product: p,
        products: raw.data?.data ?? [],
    };
}

export default connect(mapStateToProps)(ProtocolInfo);