'use strict';
import Immutable, {List, Record} from 'immutable';

import React, {Component} from 'react';

import {
    ScrollView,
    Dimensions,
} from 'react-native';

import TrendTextSection from './TrendTextSection';
import Placeholder from './Placeholder';
import CalendarTrigger from './calendar/CalendarTrigger';
import CalendarPicker from './calendar/CalendarPicker';
import ChartView from './LineChart/ChartView'

export default class RefoundStatistics extends Component {

    static propTypes = {
        section1: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                top: React.PropTypes.string,
                bottom: React.PropTypes.string,
                arrowUp: React.PropTypes.bool,
            })
        ),
        section2: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                top: React.PropTypes.string,
                bottom: React.PropTypes.string,
                arrowUp: React.PropTypes.bool,
            })
        ),
        section3: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                top: React.PropTypes.string,
                bottom: React.PropTypes.string,
                arrowUp: React.PropTypes.bool,
            })
        ),
    };

    constructor(props) {
        super(props);

        let selectdDate = new Date().getFullYear() + '年' + (new Date().getMonth()) + '月';
        this.state = {
            showPicker: false,
            selectdDate,
            selected: null,
            selectMode: 'month',
        };

        this.toogleSelector = this.toogleSelector.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onOK = this.onOK.bind(this);

        this.calendarModes = [{
            type: 'month',
            text: '月',
        }];
    }

    toogleSelector() {
        this.setState({
            showPicker: !this.state.showPicker
        });
    }

    onCancel() {
        this.toogleSelector();
    }

    onOK(selected) {
        console.log(selected);
        let selectdDate;

        let year = selected.year;
        selectdDate = selected.year + '年' + selected.month + '月';

        this.setState({
            showPicker: !this.state.showPicker,
            selectdDate,
            selected,
            selectMode: selected.selectMode,
        });
    }

    render() {

        const months = ['4月','5月','6月','7月','8月','9月'];
        return (
            <ScrollView contentContainerStyle={{flex: 1}}>
                <CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
                <Placeholder />
                <TrendTextSection content={this.props.section1} />
                <TrendTextSection content={this.props.section2} />
                <TrendTextSection content={this.props.section3} />
                <Placeholder />
                <ChartView
                    chartTitle={'近6个月退货趋势'}
                    xData={months}
                    yData={this.props.sixMonthValue}
                />

                {this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null}

            </ScrollView>
        );
    }
}