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

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

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

class MemberPracticeSummaryReport extends Component {

    constructor(props) {
        super(props);

        this.state = {
            year: new Date().getFullYear(),
            stateError: null,
        }
    }

    onGenerateReportClick = () => {
        const {fetchMemberPracticeSummaryReport} = this.props;
        const { year } = this.state;

        const currentYear = new Date().getFullYear();
        const parsedYear = parseInt(year);

        if (!parsedYear || isNaN(parsedYear)){
            this.setState({stateError: 'Year is not a number'});
            return;
        }

        if (parsedYear > currentYear){
            this.setState({stateError: 'Selected year cannot be greater than current year'});
            return;
        }

        fetchMemberPracticeSummaryReport(year);
    };

    onYearInputChange = (event, data) => {
        let newYear = parseInt(data.value)
        if (!newYear || isNaN(newYear)){
            newYear = new Date().getFullYear();
        }
        this.setState({year: newYear, stateError: null})
    };

    render () {
        const { pendingReport, fetchReportError } = this.props;
        const { year, stateError } = this.state;

        let error;
        error = stateError ? stateError : null;
        error = fetchReportError ? fetchReportError : error;

        return (
            <Container>
                <MainMenu/>
                <h3>Member Practice Summary Report</h3>
                <hr/>
                <br/>
                <Grid stackable>
                    <Grid.Row>
                        <Grid.Column width={5}>
                            <Input
                                fluid
                                type="number"
                                label={'Report for : '}
                                value={year}
                                onChange={this.onYearInputChange}
                            />
                        </Grid.Column>
                        <Grid.Column width={5}>
                            <Button disabled={pendingReport} onClick={this.onGenerateReportClick}>Generate Report</Button>
                        </Grid.Column>
                    </Grid.Row>
                    {error &&
                        <Grid.Row>
                            <Grid.Column>
                                <Message negative>
                                    <Message.Header>Error</Message.Header>
                                    <br/>
                                    <Message.Content><p>{error}</p></Message.Content>
                                </Message>
                            </Grid.Column>
                        </Grid.Row>
                    }
                </Grid>
                <Loader active={pendingReport} />
            </Container>
        );
    }
}

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

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

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