import React, { useState, useEffect } from "react";

import Table from 'antd/lib/table';
import Tag from 'antd/lib/tag';

const columns = [
    {
      title: 'Nome',
      dataIndex: 'nome',
      key: 'nome',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Sobrenom',
      dataIndex: 'sobrenome',
      key: 'sobrenome'
    },
    {
        title: 'Comunidades',
        dataIndex: 'comunidades',
        render: (item, data, index) => <>
            {
                item.map(
                    (i) => <Tag>{i}</Tag>
                )
            }
        </>,
    }
];

const TabelaPessoas = () => {
    const [ data, setData ] = useState([]);
    useEffect(() => {
        const fail = ()=> {
            this.setState({ loading: false });
            notification["error"]({
                message: 'Error',
                description: 'Data loading error...',
                style: {
                    marginTop: 100,
                }
            });
        };
        netuno.service({
            url: '/services/pessoas',
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                param1: 'value1',
                param2: 'value2'
            }),
            success: (response)=> {
                console.log(response);
                if (response.json) {
                    setData(response.json);
                } else {
                    fail();
                }
            },
            fail: ()=> {
                fail();
            }
        });
    }, []);

    return <Table columns={columns} dataSource={data} />;
};

export default TabelaPessoas;
