import React from 'react';
import { Button } from 'react-bootstrap';
import { Card, ReactTable, WaitIcon, Fa } from '../../../components';
import { server } from '../../../commons/server';

/**
 * Display the list of reports available for the case module of the
 * specified scope
 */
export default class CasesReports extends React.Component {

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

    componentWillMount() {
        const self = this;

        const req = {
            scope: this.props.scope,
            id: this.props.scopeId
        };

        // get the list of reports from the server
        server.post('/api/cases/report/query', req).then(res => self.setState({ values: res.result }));

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

    repClick(item) {
        const route = this.props.route;
        const path = route.path;
        const pg = route.data.path;
        const id = route.queryParam('id');

        const dest = path.slice(0, path.length - pg.length) + '/report?rep=' + item.id + (id ? '&id=' + id : '');
        location.hash = '#' + dest;
    }

    render() {
        const values = this.state.values;
        if (!values) {
            return React.createElement(WaitIcon, null);
        }

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

        const newPath = '#' + this.props.route.parentPath + '/reportedt' + params;

        const header = React.createElement(
            'div',
            { className: 'class-header' },
            React.createElement(
                'div',
                { className: 'pull-right' },
                React.createElement(
                    Button,
                    { bsStyle: 'success', bsSize: 'small', href: newPath },
                    __('reports.new')
                )
            ),
            React.createElement(
                'h4',
                null,
                __('reports')
            )
        );

        return React.createElement(
            Card,
            { header: header },
            React.createElement(ReactTable, {
                columns: [{
                    size: { sm: 12 },
                    content: item => React.createElement(
                        'div',
                        null,
                        React.createElement(Fa, { icon: 'line-chart', size: 1, className: 'cmd-icon' }),
                        item.name
                    )
                }],
                values: values,
                onClick: this.repClick
            })
        );
    }
}

CasesReports.propTypes = {
    scope: React.PropTypes.string.isRequired,
    scopeId: React.PropTypes.string,
    route: React.PropTypes.object
};