import React, { Component } from "react";
import "./index.less";

import Spin from 'antd/lib/spin';
import Tabs from 'antd/lib/tabs';

import TableUsers from "../../components/TableUsers/index.jsx";
import UserCalendar from "../../components/UserCalendar/index.jsx";
import UserDrawer from '../../components/UserDrawer/index.jsx';
import EventsChart from '../../components/EventsChart/index.jsx';
import MyButton from "../../components/MyButton/index.jsx";

const { TabPane } = Tabs;

export default class DashboardContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
            title: 'Bom Dia!',
            loading: false,
            user: null,
            visible: false
        };

        this.button = React.createRef();
        this.click = this.click.bind(this);
        this.openCalendar = this.openCalendar.bind(this);
        this.closeCalendar = this.closeCalendar.bind(this);
        this.showDrawer = this.showDrawer.bind(this);
        this.closeDrawer = this.closeDrawer.bind(this);
    }    

    componentWillMount() {
        console.log("will mount")
    }

    componentDidMount() {
        console.log("did mount")
    }

    componentWillUpdate(prevProps, prevState, snapshot) {
        console.log("will update");
    }

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

  
    click() {
        this.setState({ counter: this.state.counter + 1 });
        console.log('visible: ', this.state.visible);
    }

    
    showDrawer() {
        this.setState({visible: true});
      };

    closeDrawer() {
        this.setState({visible: false});
      };
      
    openCalendar(user) {
        this.setState({ user });
    }
    
    closeCalendar() {
        this.setState({user: null});
    }

    render() {
        console.log("render");
        const { counter, title, loading, user, visible } = this.state;
        if (loading) {
            return <Spin/>;
        }

        if (user) {
            return <>
            <UserCalendar 
            user={user} 
            closeCalendar={() => this.closeCalendar()}>
            </UserCalendar>
            </>;
        }
        return (
            <div className="my-dashboard">
                <UserDrawer 
                    visible={visible}
                    onClose={this.closeDrawer}
                />

                <Tabs type="card">
                    <TabPane tab="Table Users" key="1">
                        <TableUsers 
                            onCalendar={ this.openCalendar } 
                            onList = { this.showDrawer }
                        />
                    </TabPane>

                    <TabPane tab="Statistics" key="2">
                        <EventsChart />
                    </TabPane>

                    <TabPane tab="3" key="3">
                        Content of Tab Pane 3
                    </TabPane>
                </Tabs>

                <div className="my-dashboard__button">
                    <MyButton
                        mainRef={ this.button }
                        title={ title }
                        text={ `ReactJS ⚡ Ant.Design 👉 Click me! ${ counter }` }
                        click={ this.click }
                    />
                </div>
            </div>
        );
    }
}
