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

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

class PracticeSummaryReport extends Component {
    constructor(props){
        super(props);

        this.state = {
            dateRange: null,
            memberId: props.match.params.memberId,
        };
    }

    onDateRangeUpdate(dateRange){
        this.fetchIncidents(dateRange, this.state.memberId);
        this.setState({dateRange});
    }

    onMemberSelectionUpdate(memberId){
        this.fetchIncidents(this.state.dateRange, memberId);
        this.setState({memberId});
    }

    fetchIncidents(dateRange, memberId){
        const { fetchMemberIncidents } = this.props;

        if (dateRange && dateRange.startDate && dateRange.endDate && memberId){
            fetchMemberIncidents(memberId, dateRange);
        }
    }

    render () {
        const { memberIncidents, loading } = this.props;
        const { memberId, dateRange } = this.state;

        const addFeesButtonDisabled = !memberId || !dateRange || loading;

        return (
            <Container>
                <MainMenu/>
                <h3>Practice Summary Report</h3>
                <hr/>
                <Grid stackable columns="equal">
                    <Grid.Row>
                        <Grid.Column>
                            <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} defaultMemberId={memberId} />
                        </Grid.Column>
                        <Grid.Column>
                            <DateRangePicker inlineButton onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
                        </Grid.Column>
                    </Grid.Row>
                    <Grid.Row>
                        <Grid.Column>
                            <MemberSummary
                                incidents={memberIncidents}
                                loading={loading}
                            />
                        </Grid.Column>
                    </Grid.Row>
                    <Grid.Row>
                        <Grid.Column>
                            <GenerateFeesInORDButton
                                singleMember
                                disabled={addFeesButtonDisabled}
                                dateRange={dateRange}
                                memberIds={[memberId]}
                            />
                        </Grid.Column>
                    </Grid.Row>
                    <Grid.Row/>
                    <Grid.Row>
                        <Grid.Column>
                            <MemberIncidentsTables incidents={memberIncidents} pendingIncidents={loading} hideMemberName/>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    memberIncidents: state.memberIncidents.result,
    loading: state.memberIncidents.pending,
});

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

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