import React, { Component } from 'react';

import { PageTitle, SectionHeader, ToggleButtons } from 'lib/components';
import { injectIntl } from 'react-intl';
import moment from 'moment';

//connect
import { connect } from 'react-redux';
import { setPeriod, selector, PERIODS, CUSTOM_RANGE_PERIODS } from './redux.js';
import { num } from 'lib/num';
import { formatDate } from 'lib/i18n';

import messages from './messages.js';


require("./style.scss");



class PeriodTitle extends Component {


    constructor(props) {
        super(props);
        this.changePeriodHandler = this.changePeriodHandler.bind(this);

    }


    changePeriodHandler(periodId, key, dateType) {
        let { changePeriod, setPeriod } = this.props;
        //dispatch redux action
        let action = setPeriod(periodId, key, dateType);

        if (typeof changePeriod === "function") {
            changePeriod(action.payload);
        }
    }


    render() {
        let { intl, changePeriod, titleIcon, title, pageTitle, size, dateType = true, customRange } = this.props;
        let periodParams = this.props.period;
        let content = null;
        let periods = customRange ? CUSTOM_RANGE_PERIODS : PERIODS;


        if (!periodParams) {
            periodParams = {};
        }

        if (typeof changePeriod !== "function") {
            changePeriod = () => null;
        }

        let ps = Object.keys(periods).map((key) => ({ value: key, label: intl.formatMessage(messages[key]) }));
        let period = periods[periodParams.periodType] || periods["last12Months"];
        let value = num(periodParams.value) || 0;

        let periodTitleMessage = periodParams.periodType == "month" ? messages[`month${periodParams.month}`] : messages[`${periodParams.periodType}Value`];
        
        if (period.scrollable) {
            content = (
                <div className="PeriodControls">
                    <button onClick={ () => this.changePeriodHandler(periodParams.periodType, value + 1, periodParams.dateType) }>&lt;</button> 
                    <div className="PeriodType" onClick={ () => this.changePeriodHandler(periodParams.periodType, 0, periodParams.dateType) }>
                        <div className="value">{ intl.formatMessage(periodTitleMessage, periodParams) }</div>
                        <div>{ `${formatDate(periodParams.from)} - ${formatDate(periodParams.to)}` }</div>
                    </div>
                    <button onClick={ () => this.changePeriodHandler(periodParams.periodType, value - 1, periodParams.dateType) }>&gt;</button>

                </div>
            );
        } else if (period.useRange) {
            content = (
                <div className="PeriodControls">
                    <div className="PeriodType">
                        {/*}
                        <div className="value">{ intl.formatMessage({ id: `common.period.${periodParams.periodType}` }) }</div>
                        <div>{ `${formatDate(periodParams.from)} - ${formatDate(periodParams.to)}` }</div>
                        */}
                    </div>
                </div>
            );
        } else {
            content = (
                <div className="PeriodControls">
                    <div className="PeriodType">
                        <div className="value">{ intl.formatMessage(periodTitleMessage) }</div>
                        <div>{ `${formatDate(periodParams.from)} - ${formatDate(periodParams.to)}` }</div>
                    </div>
                </div>
            );
        }

        let dates = [
            { value: "BILLED_DATE", label: intl.formatMessage(messages.dateTypeBilled) },
            { value: "DUE_DATE", label: intl.formatMessage(messages.dateTypeDue) }
        ];

        return (
            <div className="PeriodTitle">
                <ToggleButtons options={ ps } value={ periodParams.periodType } onChange={ (val) => this.changePeriodHandler(val, 0, periodParams.dateType) } />
                { content }
                { dateType ? <ToggleButtons options={ dates } value={ periodParams.dateType || "BILLED_DATE" } onChange={ (val) => this.changePeriodHandler(periodParams.periodType, num(periodParams.value), val) } /> : null }
            </div>
        );
    }

}

function mapDispatchToProps(dispatch, props) {
    return {
        setPeriod: (period, from, to) => dispatch(setPeriod(period, from, to))
    };
}


export default injectIntl(connect(selector, mapDispatchToProps)(PeriodTitle));

