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

import Table from 'antd/lib/table';
import Button from 'antd/lib/button';
import Tag from 'antd/lib/tag';
import notification from 'antd/lib/notification';

import JanelaPublicacoes from "./JanelaPublicacoes/index.jsx";

const TabelaPessoas = () => {
    const [ data, setData ] = useState([]);
    const [ loading, setLoading ] = useState(true);
    const [ pessoaPublicacoes, setPessoaPublicacoes ] = useState(null);
    useEffect(() => {
        const fail = ()=> {
            setLoading(false);
            notification["error"]({
                message: 'Tabela das Peessoas',
                description: 'Ocorreu um erro ao carregar a tabela das pessoas.',
                style: {
                    marginTop: 100,
                }
            });
        };
        netuno.service({
            url: '/services/pessoas',
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            success: (response)=> {
                console.log(response);
                if (response.json) {
                    setLoading(false);
                    setData(response.json);
                } else {
                    fail();
                }
            },
            fail: ()=> {
                fail();
            }
        });
    }, []);


    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>
                    )
                }
            </>,
        },
        {
            title: 'Ações',
            render: (item, data, index) => {
                return <Button onClick={ ()=> { setPessoaPublicacoes(data); } }>Publicaçõe</Button>
            }
        }
    ];

    return <>
        { pessoaPublicacoes && <JanelaPublicacoes pessoa={pessoaPublicacoes} onClose={ ()=> setPessoaPublicacoes(null) } /> }
        <Table columns={columns} dataSource={data} loading={loading} />
    </>;
};

export default TabelaPessoas;
