import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import Table from 'antd/lib/table';
import Tag from 'antd/lib/tag';
import Button from 'antd/lib/button';
import notification from 'antd/lib/notification';

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

const TabelaPessoas = ({ }) => {
    const [ tabelaDados, setTabelaDados ] = useState([]);
    const [ pessoaPublicacoes, setPessoaPublicacoes ] = useState(null);
    const [ carregando, setCarregando ] = useState(false);

    useEffect(() => {
        setCarregando(true);
        const fail = () => {
            setCarregando(false);
            notification["error"]({
                message: 'Tabela de Pessoas',
                description:
                    'Houve uma falha ao carregar a tabela das pessoas...',
                style: {
                    marginTop: 100
                }
            });
        };
        netuno.service({
            method: "GET",
            url: "/services/pessoas",
            credentials: "include",
            success: (response) => {
                console.log("Response", response)
                if (response.json) {
                    setTabelaDados(response.json);
                    setCarregando(false);
                } else {
                    fail();
                }
            },
            fail: (e) => {
                console.log("Pessoas Fail.", e);
                fail();
            }
        });
    }, [])

    const columns = [
        {
            title: 'Nome',
            dataIndex: 'nome',
            key: 'nome'
        },
        {
            title: 'Cidade',
            dataIndex: 'cidade',
            key: 'cidade'
        },
        {
            title: 'Comunidades',
            dataIndex: 'comunidades',
            key: 'comunidades',
            render: (comunidades, data) => <>
                {
                    comunidades.map((comunidade) => 
                        <Tag key={comunidade.nome}>{comunidade.nome}</Tag>
                    )
                }
            </>
        },
        {
            title: "Ações",
            render: (text, record, index) => <>
            {
                <Button onClick={ ()=> setPessoaPublicacoes(record) }>
                    Publicações
                </Button>
            }
        </>
        }
    ];

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

TabelaPessoas.propTypes = {
};

export default TabelaPessoas;
