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 MemberIncidentsTables from '../../components/MemberIncidentsTables';
import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';

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

class IncidentsReport extends Component {
    state = {dateRange: null};

    onDatesUpdate = (dateRange) => {
        const { fetchIncidents } = this.props;

        this.setState({dateRange});
        fetchIncidents(dateRange);
    };

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

        return (
            <Container>
                <MainMenu/>
                <h3>Incidents Report</h3>
                <hr/>
                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate} inlineButton />
                <br/>
                <GenerateFeesInORDButton
                    disabled={pendingIncidents}
                    dateRange={dateRange}
                />
                <br/><br/>
                <hr/>
                <br/>
                <MemberIncidentsTables pendingIncidents={pendingIncidents} incidents={incidents} />
            </Container>
        );
    }
}

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

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

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