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

import React, {Component} from 'react';

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

import TrendTextSection from './TrendTextSection';
import Placeholder from './Placeholder';
import CalendarTrigger from './calendar/CalendarTrigger';
import CalendarPicker from './calendar/CalendarPicker';
import ChartView from './chart/ChartView';
import LoadingIndicator from './indicator/LoadingIndicator';

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,
                hasTrendData: React.PropTypes.bool,
            })
        ),
        section2: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                top: React.PropTypes.string,
                bottom: React.PropTypes.string,
                arrowUp: React.PropTypes.bool,
                hasTrendData: React.PropTypes.bool,
            })
        ),
        section3: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                top: React.PropTypes.string,
                bottom: React.PropTypes.string,
                arrowUp: React.PropTypes.bool,
                hasTrendData: 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) {
        let selectdDate;

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

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

    render() {

        return (
            <ScrollView contentContainerStyle={styles.contentContainer}>
                <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={this.props.sixMonths}
                    yData={this.props.sixMonthValue}
                />
                <LoadingIndicator
                    isVisible={this.props.isFetching}
                />
                {this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null}

            </ScrollView>
        );
    }
}

let {width, height} = Dimensions.get('window');

let scrollHeight = 45 + 15 + 81 * 3 + 15 + 245;
scrollHeight = scrollHeight > height ? scrollHeight : height;

let styles = StyleSheet.create({
    contentContainer: {
        height: scrollHeight
        // flex: 1,
    },
});