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

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 Service from "../../utils/Service";

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

const TabelaPessoas = () => {
    const [ data, setData ] = useState([]);
    const [ pessoaPublicacoes, setPessoaPublicacoes ] = useState(null);
    const [ loading, setLoading ] = useState(false);

    useEffect(() => {
        Service.call({
            url: `pessoas`,
            setData,
            setLoading,
            errorTitle: 'Tabela de Pessoas',
            errorMessage: 'Houve uma falha ao carregar a tabela das pessoas...'
        });
    }, [ ]);

    const columns = [
        {
            title: "Nome",
            dataIndex: "nome"
        },
        {
            title: "Cidade",
            dataIndex: "cidade"
        },
        {
            title: "Comunidades",
            dataIndex: "comunidades",
            render: (comunidades) => (
                <div>
                    {
                        comunidades.map((nome) => (
                            <Tag>{nome}</Tag>
                        ))
                    }
                </div>
            )
        },
        {
            title: "Ações",
            render: (text, record, index) => (
                <div>
                    { <Button onClick={ () =>  setPessoaPublicacoes(record) }>Publicações</Button>}
                </div>
            )
        }
    ];
    
    return <>
        { !!pessoaPublicacoes && <JanelaPublicacoes
            pessoa={pessoaPublicacoes}
            onClose={ () => setPessoaPublicacoes(null) }
        /> }
        <Table dataSource={data} { ...{ columns, loading } } />
    </>;
};

export default TabelaPessoas;
