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

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

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

class MemberPracticeSummaryReport extends Component {
    render () {
        const { fetchMemberPracticeSummaryReport, pendingReport } = this.props;
        return (
            <Container>
                <MainMenu/>
                <h3>Member Practice Summary Report</h3>
                <hr/>
                <br/>
                <Loader active={pendingReport} />
                <Button disabled={pendingReport} onClick={fetchMemberPracticeSummaryReport}>Generate Report</Button>
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    pendingReport: state.memberPracticeSummaryReport.pending,
});

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

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