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

import Modal from 'antd/lib/modal';
import Typography from 'antd/lib/typography';
import Spin from 'antd/lib/spin';
import notification from 'antd/lib/notification';

import PropTypes from "prop-types";

const { Title } = Typography;

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

    useEffect(() => {
        const fail = ()=> {
            setLoading(false);
            notification["error"]({
                message: 'Publicações',
                description: 'Ocorreu um erro ao carregar as publicações da pessoa.',
                style: {
                    marginTop: 100,
                }
            });
        };
        netuno.service({
            url: '/services/pessoas/publicacoes',
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                uid: pessoa.uid
            }),
            success: (response)=> {
                console.log(response);
                if (response.json) {
                    setLoading(false);
                    setData(response.json);
                } else {
                    fail();
                }
            },
            fail: ()=> {
                fail();
            }
        });
    }, []);

    return <Modal title="Publicações" visible={true} onOk={onClose} onCancel={onClose}>
        <Title level={3}>{ pessoa.nome }</Title>
        { loading && <Spin />}
        { data.length > 0 ?
            data.map(
                (publicacao) => (
                    <div>
                        <Title level={5}>{ publicacao.comunidade }</Title>
                        { publicacao.mensagem }
                        <p><i>{ publicacao.momento.replace(".0", "") }</i></p>
                    </div>
                )
            )
        : (loading ? null : <p>Não fez publicações ainda.</p>)
        }
    </Modal>
};

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

export default JanelaPublicacoes;