import React, { Component } from "react";
import notification from 'antd/lib/notification';

import MyButton from "../../components/MyButton/index.jsx";
import TabelaCategoria from "../../components/TabelaCategorias/index.jsx";
import TabelaLoja from "../../components/TabelaLoja/index.jsx";
import TabelaProduto from "../../components/TabelaProdutos/index.jsx";


import "./index.less";
import GraficoStock from "../../components/GraficoStock/index.jsx";

export default class DashboardContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        };
        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:
        const fail = ()=> {
            this.setState({ loading: false });
            notification["error"]({
                message: 'Error',
                description: 'Data loading error...',
                style: {
                    marginTop: 100,
                }
            });
        };
        netuno.service({
            url: '/services/my-data-service',
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                param1: 'value1',
                param2: 'value2'
            }),
            success: (response)=> {
                console.log(response);
                if (response.json) {
                    this.setState({
                        loading: false,
                        data: response.json
                    });
                } else {
                    fail();
                }
            },
            fail: ()=> {
                fail();
            }
        });
        */
    }

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

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



    render() {
        const { counter } = this.state;    

        const styleh1 = {
                color: "#5b5ce1",
                font: "candara",
                padding: "8px",
                textAlign: "center",
          }
        return (
            <div className="my-dashboard">
              
                    <h1 style={styleh1}>Lojas</h1>
                    <TabelaLoja/>
                    <h1 style={styleh1}>Produtos</h1>
                    <TabelaProduto/>
                    <h1 style={styleh1}>Categorias</h1>
                    <TabelaCategoria/> 
                    <h1 style={styleh1}>Gráfico</h1>
                    <GraficoStock/>   

            </div>
        );
    }
}

