import React from 'react';
import { Button } from 'react-bootstrap';
import { Card, WaitIcon } from '../../../components';
import { app } from '../../../core/app';
import Report from './report';
import IndicatorView from './indicator-view';
import { arrangeGrid } from '../../../commons/grid-utils';

import './report.less';

/**
 * Display a report with its indicators
 */
export default class ReportView extends React.Component {

    constructor(props) {
        super(props);
        this.delete = this.delete.bind(this);
    }

    componentWillMount() {
        const id = this.props.route.queryParam('rep');
        const self = this;

        Report.load(id, this.props.scope, this.props.scopeId).then(res => self.setState({ report: res }));

        this.setState({ report: null });
    }

    /**
     * Called when user clicks on the delete button to delete a report
     */
    delete() {
        const self = this;

        app.messageDlg({
            title: __('action.delete'),
            message: __('form.confirm_remove'),
            type: 'YesNo'
        }).then(res => {
            if (res === 'yes') {
                // delete the report
                self.state.report.delete().then(() => {
                    location.hash = self.props.route.parentPath + '/reports';
                });
            }
        });
    }

    render() {
        const rep = this.state.report;

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

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

        const inds = arrangeGrid(lst);

        const params = this.props.scopeId ? '&id=' + this.props.scopeId : '';

        const header = React.createElement(
            'div',
            null,
            React.createElement(
                'div',
                { className: 'pull-right' },
                React.createElement(
                    Button,
                    { href: '#' + this.props.route.parentPath + '/reportedt?rep=' + rep.id + params, bsSize: 'sm' },
                    __('action.edit')
                ),
                React.createElement(
                    Button,
                    { bsSize: 'sm', onClick: this.delete },
                    __('action.delete')
                )
            ),
            React.createElement(
                'div',
                { className: 'title' },
                rep.schema.title
            )
        );

        return React.createElement(
            'div',
            null,
            React.createElement(Card, { header: header }),
            inds
        );
    }
}

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