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

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

import { Chart, LineAdvance} from 'bizcharts';

export default () => {
    const [ dados, setDados ] = useState([]);
    const [ carregando, setCarregando ] = useState(false);

    useEffect(() => {
        setCarregando(true);
        const fail = () => {
            setCarregando(false);
            notification["error"]({
                message: 'Gráfico das Publicações Diárias por Comunidade',
                description:
                    'Houve uma falha ao carregar os dados do gráfico...',
                style: {
                    marginTop: 100
                }
            });
        };
        netuno.service({
            method: "GET",
            url: "/services/graficos/publicacoes-comunidades-diarias",
            credentials: "include",
            success: (response) => {
                console.log("Response", response)
                if(response.json) {
                    setDados(response.json);
                    setCarregando(false);
                } else {
                    fail();
                }
            },
            fail: (e) => {
                console.log("graficos/publicacoes-comunidades-diarias Fail.", e);
                fail();
            }
        });
    }, []);

    return (
        <>
            {carregando && <Spin/>}
            <Chart padding={[10, 20, 50, 40]} autoFit height={300} data={dados}>
                <LineAdvance
                    shape="smooth"
                    point
                    area
                    position="dia*total"
                    color="comunidade"
                />
            </Chart>
        </>
    );
}