import React, {Component} from 'react';

import {Row, Col, Icon, Spin} from 'antd';
import './index.css';
import Column from './Column';
import {Query} from "react-apollo";
import gql from "graphql-tag";
import {SHOW_TABLE} from '../../gql'
import Schema from "./Schema";


class Table extends Component {
    render() {
        let userID = this.props.userID;
        return (
            <Query query={gql(SHOW_TABLE)} variables={{schema_id: this.props.schemaID}}>

                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }
                        return (
                            <div>
                                {
                                    JSON.parse(data.schema_by_id.schemaData).map(table => (
                                        <Row key={table.name} className='show'>
                                            <Col span={8}><span>{table.name}</span></Col>
                                            <Col span={8}><span>{table.remark}</span></Col>
                                            <Col span={8}><Icon type="delete"/></Col>
                                        </Row>
                                    ))
                                }
                            </div>
                        );
                    }
                }
            </Query>
        )
    }
}

export default Table;