import React, { Component } from 'react';
import { connect } from 'react-redux';
import {Container, Grid} from 'semantic-ui-react';

import MainMenu from '../../components/MainMenu';
import DateRangePicker from '../../components/DateRangePicker';
import MemberSelector from './components/MemberSelector';
import MemberSummary from './components/MemberSummary';
import MemberIncidentsTable from '../../components/MemberIncidentsTable';

class PracticeSummaryReport extends Component {
    render () {
        return (
            <Container>
                <MainMenu/>
                <h3>Practice Summary Report</h3>
                <hr/>
                <Grid stackable columns="equal">
                    <Grid.Row>
                        <Grid.Column>
                            <MemberSelector />
                        </Grid.Column>
                        <Grid.Column>
                            <DateRangePicker />
                        </Grid.Column>
                    </Grid.Row>
                    <Grid.Row>
                        <Grid.Column>
                            <MemberSummary />
                        </Grid.Column>
                    </Grid.Row>
                    <Grid.Row>
                        <Grid.Column>
                            <MemberIncidentsTable title="Incidents list" />
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
});

const mapDispatchToProps = (dispatch) => ({
});

export default connect(mapStateToProps, mapDispatchToProps)(PracticeSummaryReport);