import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Col} from 'reactstrap';
import {fetchNextActions} from '../../actions/dashboard/nextActionsActions';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import NextActionsList from './components/NextActionsList.jsx';
import {dashboardTexts} from '../../constants/dashboardConstants';
import './NextActions.css';

class NextActionsContainer extends Component {
    componentDidMount() {
        this.props.dispatch(fetchNextActions());
    }

    render() {
        const {nextActions, isLoading} = this.props;

        return (<Col xl="4" lg="4" md="12" sm="12" xs="12">
                <WiaasBox id="next-actions-gadget" mainTitle={dashboardTexts.labels.NEXT_ACTIONS}>
                    {
                        isLoading &&
                        <div className="loader">
                            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                        </div>
                    }
                    {
                        (nextActions && nextActions.length > 0 && !isLoading) ?
                        <NextActionsList nextActions={nextActions}/> :
                        <div className="dashborad-message">{dashboardTexts.labels.NO_ACTIONS}</div>
                    }
                </WiaasBox>
        </Col>);
    }
}

const mapStateToProps = (state) => ({
    nextActions: state.nextActionsReducer.nextActions,
    isLoading: state.nextActionsReducer.isLoading
});

export default connect(mapStateToProps)(NextActionsContainer);
