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

import { connect } from 'react-redux';
import { fetchList, customerIncomeReportAction, customerTimelineReportAction, selector } from './redux.js';


//components
import CustomerList from 'components/CustomerList';
import CustomerFilterForm from 'components/CustomerFilterForm';
import CustomerTimelineChart from 'components/CustomerTimelineChart';
import CustomerIncomeChart from 'components/CustomerIncomeChart';
import CustomerStats from 'components/CustomerStats';
import FetchedContent from 'components/FetchedContent';
import { PeriodTitle } from 'containers/Params';
import { ActivityIndicator, Button, ButtonBar, PageSwitcher, ListMessagePanel, ListTitle, SectionHeader, ToolbarButton, Toolbar, ToolbarSection, ToolbarButtons } from 'lib/components';

import { injectIntl } from 'react-intl';
import { formatMoney, formatDate } from 'lib/i18n';
import messages from './messages.js';

import icons from 'constants/icons';
import palette from 'utils/palette';



class Customers extends Component {

	constructor(props) {
		super(props);

		this.changePeriod = this.changePeriod.bind(this);
        this.init = this.init.bind(this);
	}


    init() {
        let unitId = this.props.unitId;
        this.props.fetchList(unitId, this.props.filter.data, this.props.list.paging, this.props.list.sorting);
        this.changePeriod(this.props.periodParams);
    }


	componentWillMount() {
        this.init();
	}


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

        this.props.customerIncomeReportAction(unitId, {from, to, dateType});
        this.props.customerTimelineReportAction(unitId, {from, to, dateType});
	}


	render() {
		let { intl, filter, list, timeline, income, summary, unitId } = this.props;
		let pending = list.status == "pending";

		return (
			<div className="pv10">
                <Toolbar>
                    <ToolbarSection>
						<ListTitle 
							title={ intl.formatMessage(messages.title) }
							titleIcon={ icons.customers }
							/>
                    </ToolbarSection>
                    <ToolbarButtons>
                        <ToolbarButton 
                        	label={ intl.formatMessage(messages.addCustomer) } 
                        	onClick={ () => this.context.router.push(`/customers/new`) }>
                            <span className="icon">{ icons.addCustomer }</span>
                        </ToolbarButton>
                    </ToolbarButtons>
                </Toolbar>


                <div className="dashboard-row">
                    <div className="col-md-6 p10">
                        <FetchedContent 
                            status={ list.status } 
                            error={ list.error } 
                            fresh={ list.fresh } 
                            empty={ !list.data || !list.data.length } 
                            size="big"
                            buttons={ (
                                        <ToolbarButton 
                                            label={ intl.formatMessage(messages.addCustomer) } 
                                            onClick={ () => this.context.router.push(`/customers/new`) }>
                                            <span className="icon">{ icons.addCustomer }</span>
                                        </ToolbarButton>
                            ) }
                            onRefresh={ () => this.props.fetchList(unitId, filter.data, list.paging, list.sorting) }>

                            <CustomerList 
                                items={ list.data } 
                                onDetailClick={ (id) => this.context.router.push(`/customers/${id}`)} 
                                status={ list.status }
                                disabled={ pending }
                                />
                            { this.props.list.data ? 
                                <PageSwitcher 
                                    paging={ list.paging } 
                                    onPageChanged={ (paging) => this.props.fetchList(list.filter, paging, list.sorting) } 
                                    status={ list.status } 
                                    disabled={ pending }
                                    displayNoPages
                                    /> : null 
                            }
                        </FetchedContent>

                    </div>
                    <div className="col-md-6 p10">
                        <PeriodTitle
                            title={ intl.formatMessage(messages.overviewTitle) }
                            changePeriod={ this.changePeriod }
                            />
                        <div className="pv20">
                            <div className="p10 hover-highlight-light relative">
                                <h2 className="mb20">{ intl.formatMessage(messages.customerIncomeChart) }</h2>
                        	    { income ? <CustomerIncomeChart { ...income.data } status={ income.status } emptyLabel={ intl.formatMessage(messages.emptyChart) } /> : null }
                                <ActivityIndicator type="overlay" show={ income && income.status == "pending" } />
                            </div>
                            <div className="p10 hover-highlight-light relative">
                                <h2 className="mb20">{ intl.formatMessage(messages.customerIncomeTimeline) }</h2>
                                { timeline ? <CustomerTimelineChart { ...timeline.data } status={ timeline.status } /> : null }
                                <ActivityIndicator type="overlay" show={ timeline && timeline.status == "pending" } />
                            </div>
                        </div>
                    </div>
                </div>

			</div>
		);
	}

}

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



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



function mapDispatchToProps(dispatch, props) {
	return {
		dispatch,
		fetchList: (unitId, filter, paging, sorting) => dispatch(fetchList(filter, paging, sorting, { unitId })),
		customerIncomeReportAction: (unitId, params) => dispatch(customerIncomeReportAction(unitId, params)),
        customerTimelineReportAction: (unitId, params) => dispatch(customerTimelineReportAction(unitId, params))
  	};
}


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