import React, { useEffect, useState } from "react"
import Table from 'antd/lib/table';
import Tag from 'antd/lib/tag'
import notification from 'antd/lib/notification'

const PessoasTabela = () => {
    const [data, setData] = useState([])
    const [loader, setLoader] = useState(true)
    useEffect(() => {
        netuno.service({
            url: '/services/pessoa',
            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)
                    setLoader(false)
                } else {
                    fail();
                }
            },
            fail: ()=> {
                fail();
            }
        });
    }, [])
    const fail = ()=> {
        setLoader(false)
        notification["error"]({
            message: 'Error',
            description: 'Data loading error...',
            style: {
                marginTop: 100,
            }
        });
    };
      
      const columns = [
        {
          title: 'Nome',
          dataIndex: 'nome',
          key: 'name',
        },
        {
          title: 'Sobrenome',
          dataIndex: 'sobrenome',
          key: 'age',
        },
        {
          title: 'Cidade',
          dataIndex: 'cidade',
          key: 'address',
        },
        {
            title: 'Comunidades',
            dataIndex: 'comunidades',
            key: 'address',
            render: (comunidades) => comunidades.map((comunidade) => {
                return(
                    <Tag>{comunidade}</Tag>
                )
            })
          },
      ];
    return (
        <div>
            <Table dataSource={data} columns={columns} />;    
        </div>
    )
}

export default PessoasTabela