import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { connect } from 'react-redux';
import { paymentReportAction, selector } from './redux.js';

import { PeriodTitle, getPeriodParams } from 'containers/Params';
import PaymentReportData from 'components/PaymentReportData';

import { ActivityIndicator, Button, ButtonBar, DetailTitle, ToolbarButton, Toolbar, ToolbarSection, ToolbarButtons, ToolbarRow } from 'lib/components';

import { injectIntl } from 'react-intl';
import messages from './messages.js';
import commonMessages from '../../messages.js';

import icons from 'constants/icons';


class PaymentReport extends Component {

	constructor(props) {
		super(props);

		this.generateReport = this.generateReport.bind(this);
		this.handleBack = this.handleBack.bind(this);
	}


	componentWillMount() {
		this.generateReport(this.props.params);
	} 


	handleBack() {
		this.context.router.push('/reports');
	}

	generateReport(periodParams) {
		let unitId = this.props.unitId;
        let { from, to, dateType } = periodParams;
		this.props.paymentReportAction(unitId, { from, to, dateType });
	}

	render() {
		let { form } = this.refs;
		let intl = this.props.intl;
		let pending = this.props.status === "pending";

		return (
			<div className="pv10">
                <Toolbar>
                    <ToolbarSection>
                        <DetailTitle 
                            title={ intl.formatMessage(messages.title) }
                            titleIcon={ icons.paymentReport }
                            />
                    </ToolbarSection>
                    <ToolbarButtons>
                        <ToolbarButton 
                            label={ intl.formatMessage(commonMessages.buttonBack) } 
                            onClick={ this.handleBack }>
                            <span className="icon">{ icons.back }</span>
                        </ToolbarButton>
                    </ToolbarButtons>
                    <ToolbarRow>
                        <PeriodTitle
                            size="normal"
                            changePeriod={ this.generateReport }
                            dateType={ false }
                            customRange={ true }
                            />
                    </ToolbarRow>
				</Toolbar>
				<PaymentReportData 
					{...this.props.data} 
					i18n={ this.props.i18n }
					/>
			</div>
		);
	}

}

PaymentReport.contextTypes = {
	router: PropTypes.object.isRequired
};



const mapStateToProps = (state, props) => selector(state);



function mapDispatchToProps(dispatch, props) {
	return {
    	dispatch,
    	paymentReportAction: (unit, params) => dispatch(paymentReportAction(unit, params))
  	};
}


export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(PaymentReport));
