import React, { Component } from "react";
import MyButton from "../../components/MyButton/index.jsx";
import PessoasTabela from "../../components/PessoasTabela/index.jsx";
import GraficoPublicacoesTotaisPorComunidade from "../../components/GraficoPublicacoesTotaisPorComunidade/index.jsx"
import GraficoPublicacoesDiariasPorComunidade from "../../components/GraficoPublicacoesDiariasPorComunidade/index.jsx"
import  Tabs  from 'antd/lib/tabs';
import {AiOutlineUser, AiOutlineBarChart, AiOutlineLineChart} from 'react-icons/ai'
import "./index.less";

const { TabPane } = Tabs;

export default class DashboardContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
            data: []
        };
        this.button = React.createRef();
        this.click = this.click.bind(this);
    }

    componentWillMount() {
        /*
        // Basic sample of the service call:
        fetch('/services/my-test.netuno', {
            credentials: 'include'
        }).then((response) => {
            return response.json();
        }).then((json) => {
            // json...;
        });
        */
        
        
        // Better sample of the recommended way to call services:
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        $(this.button.current).fadeOut(250).fadeIn(250);
    }

    click() {
        this.setState({ counter: this.state.counter + 1 });
    }

    render() {
        const { counter, data } = this.state;
        return (
            <div className="my-dashboard">
                 <Tabs defaultActiveKey="1">
                    <TabPane tab={
                        <span className="tab-name">
                            <AiOutlineUser size={24} color="#444" style={{marginRight: 5}} />
                            Pessoas
                        </span>
                    } key="1">
                         <PessoasTabela />
                    </TabPane>
                    <TabPane tab={
                        <span className="tab-name">
                            <AiOutlineBarChart size={24} color="#444" style={{marginRight: 5}} />
                            Publicações totais
                        </span>
                    } key="2">
                        <GraficoPublicacoesTotaisPorComunidade />
                    </TabPane>
                    <TabPane tab={
                        <span className="tab-name">
                            <AiOutlineLineChart size={24} color="#444" style={{marginRight: 5}} />
                            Publicações diárias
                        </span>
                     } key="3">
                        <GraficoPublicacoesDiariasPorComunidade />
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}
