import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Modal from 'antd/lib/modal';
import Spin from 'antd/lib/spin';
import Typography from 'antd/lib/typography';
import Service from "../../../utils/Service";

const { Title } = Typography;

const JanelaPublicacoes = ({ pessoa, onClose }) => {
    const [ loading, setLoading ] = useState(false);
    const [ data, setData ] = useState([]);

    useEffect(() => {
        Service.call({
            url: `pessoas/publicacoes`,
            method: "post",
            setData,
            setLoading,
            body: JSON.stringify({
                uid: pessoa.uid
            }),
            errorTitle: 'Lista de Publicações',
            errorMessage: 'Houve uma falha ao carregar a lista das publicações...'
        })
    }, []);
    return <Modal
        title="Publicações"
        visible={true}
        onOk={()=> { onClose() } }
        onCancel={()=> { onClose() } }>
        { Service.spin(loading) }
        { data.length > 0 ?
            data.map(
                (item)=> (
                    <div>
                        <Title level={4}>{item.nome}</Title>
                        {item.mensagem}
                        <p>{item.momento.replace(".0", "")}</p>
                    </div>
                )
            )
        : <p>Não fez publicações ainda.</p> }
    </Modal>;
};

JanelaPublicacoes.propTypes = {
    pessoa: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired
};

export default JanelaPublicacoes;
