import React from 'react';
import { WaitIcon } from '../../../components';
import { server } from '../../../commons/server';
import Indicator from '../reports/indicator';
import IndicatorView from '../reports/indicator-view';
import { arrangeGrid } from '../../../commons/grid-utils';

export default class DashboardView extends React.Component {
    componentWillMount() {
        this.fetch(this.props.scope, this.props.scopeId);
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.scopeId !== nextProps.scopeId) {
            this.fetch(nextProps.scope, nextProps.scopeId);
        }
    }

    /**
     * Fetch the indicator from the server
     */
    fetch(scope, scopeId) {
        const self = this;

        server.post('/api/dashboard/generate', {
            scope: scope,
            scopeId: scopeId
        }).then(res => {
            const data = res.result;
            const caseIndicators = data.caseIndicators.map(ind => new Indicator(null, ind.schema, ind.data));
            self.setState({ caseIndicators: caseIndicators });
        });

        // trigger the wait icon
        this.setState({ caseIndicators: null });
    }

    render() {
        const caseIndicators = this.state.caseIndicators;

        if (!caseIndicators) {
            return React.createElement(WaitIcon, null);
        }

        const lst = caseIndicators.map((ind, index) => ({
            size: { sm: ind.schema.size },
            content: React.createElement(IndicatorView, { key: index, indicator: ind })
        }));

        const inds = arrangeGrid(lst);

        return React.createElement(
            'div',
            null,
            React.createElement(
                'h2',
                null,
                __('Dashboard')
            ),
            inds
        );
    }
}

DashboardView.propTypes = {
    scope: React.PropTypes.oneOf(['WORKSPACE', 'ADMINUNIT', 'UNIT']).isRequired,
    scopeId: React.PropTypes.string
};