import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";

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

import { Chart, LineAdvance } from 'bizcharts';

const { Title } = Typography;

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

    useEffect(() => {
        const fail = ()=> {
            setLoading(false);
            notification["error"]({
                message: 'Gráfico das Publicações Diárias',
                description: 'Ocorreu um erro ao carregar o gráfico.',
                style: {
                    marginTop: 100,
                }
            });
        };
        netuno.service({
            url: '/services/publicacoes/graficos/comunidades/diaria',
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            success: (response)=> {
                console.log(response);
                if (response.json) {
                    setLoading(false);
                    setData(response.json);
                } else {
                    fail();
                }
            },
            fail: ()=> {
                fail();
            }
        });
    }, []);

    return <>
        <Title level={5}>Publicações Diárias por Comunidade</Title>
        { loading && <Spin size="large"/> }
        <Chart padding={[10, 20, 60, 40]} autoFit height={300} data={data} >
            <LineAdvance
                shape="smooth"
                point
                area
                position="dia*total"
                color="comunidade"
            />
        </Chart>
    </>;
};

GraficoPublicacoesDiariasPorComunidade.propTypes = {
};

export default GraficoPublicacoesDiariasPorComunidade;