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

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

import { fetchIncidents } from '../../store/actions';

class IncidentsReport extends Component {
    onDatesUpdate(dateRange) {
        const { fetchIncidents } = this.props;
        fetchIncidents(dateRange);
    }

    render () {
        const { pendingIncidents, incidents } = this.props;

        return (
            <Container>
                <MainMenu/>
                <h3>Incidents Report</h3>
                <hr/>
                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
                <br/>
                <MemberIncidentsTable loading={pendingIncidents} incidents={incidents} openMemberSummaryOnMemberClick />
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    pendingIncidents: state.incidentsReport.pending,
    incidents: state.incidentsReport.result,
});

const mapDispatchToProps = (dispatch) => ({
    fetchIncidents: (dateRange) => fetchIncidents(dispatch, dateRange),
});

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