import React from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import { RouteView } from '../../../components/router';
import CasesSideView from '../cases/cases-side-view';

import CasesDistribution from './cases-distribution';

/**
 * The specific views of this page
 */
const views = [{
    title: __('cases.open'),
    icon: 'clone',
    path: '/active',
    default: true,
    view: CasesDistribution,
    sideView: true
}];

/**
 * Display the main case tab of the administrative unit or workspace view
 */
export default class Cases extends React.Component {

    render() {
        const scope = this.props.scope;

        const adminUnitId = scope === 'ADMINUNIT' ? this.props.route.queryParam('id') : null;

        const routes = CasesSideView.createRoutes(views);

        const sideViews = views.filter(v => v.sideView);

        return React.createElement(
            'div',
            { className: 'mtop-2x' },
            React.createElement(
                Grid,
                { fluid: true },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 3 },
                        React.createElement(CasesSideView, {
                            scope: scope,
                            views: sideViews,
                            scopeId: adminUnitId,
                            route: this.props.route
                        })
                    ),
                    React.createElement(
                        Col,
                        { sm: 9 },
                        React.createElement(RouteView, { routes: routes,
                            viewProps: { scope: this.props.scope, scopeId: adminUnitId } })
                    )
                )
            )
        );
    }
}

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