import React, { useEffect, useState } from "react"
import Table from 'antd/lib/table';
import Tag from 'antd/lib/tag'
import notification from 'antd/lib/notification';
import Button from "antd/lib/button";
import JanelaPublicacoes from './JanelaPublicacoes/index.jsx'

const PessoasTabela = () => {
    const [data, setData] = useState([])
    const [publicacoesPessoa, setPublicacoesPessoa] = useState([])
    const [loader, setLoader] = useState(true)
    const [modalIsOpen, setModalIsOpen] = useState(false)
    useEffect(() => {
        netuno.service({
            url: '/services/pessoas',
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            success: (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: 'nome',
        },
        {
          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>
                )
            })
        },
        {
            title: "Publicações",
            key: "publicacões",
            render: (publicacoes) => <Button onClick={() => {
                setModalIsOpen(true)
                setPublicacoesPessoa(publicacoes)
            }}>Publicações</Button>
        }
      ];
    return (
        <div>
            <JanelaPublicacoes
                pessoa={publicacoesPessoa}
                ok={() => setModalIsOpen()}
                cancel={() => setModalIsOpen()}
                isVisible={modalIsOpen}
            />
            <Table dataSource={data} columns={columns} />    
        </div>
    )
}

export default PessoasTabela