'use strict';

import React from 'react';
import ReactNative 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'

const {
    Component,
} = React;

const {
    View,
    Text,
    ScrollView,
    Platform,
    Dimensions,
    StyleSheet
} = ReactNative;

export default class SaleStatistics extends Component {

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

    constructor(props) {
        super(props);

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

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

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

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

    onCancel() {
        this.toogleSelector();
    }

    onOK(selected) {

        let selectdDate;

        if (selected.selectMode === 'day') {
            let day = selected.day;
            selectdDate = day.getFullYear() + '年' + (day.getMonth() + 1) + '月' + day.getDate() + '日';
        } else if (selected.selectMode === 'week') {
            let from = selected.from;
            let to = selected.to;
            selectdDate = from.getFullYear() + '年' + (from.getMonth() + 1) + '月' + from.getDate() + '日'
                + '-' + to.getFullYear() + '年' + (to.getMonth() + 1) + '月' + to.getDate() + '日';
        } else if (selected.selectMode === 'month') {
            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} />
                <Placeholder />
                <ChartView
                    chartTitle={'近7天交易趋势'}
                    xData={this.props.sevenDays}
                    yData={this.props.trendInSevenDays}
                />

                {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 navbarHeight = (Platform.OS === 'android') ? 50 : 64;
let contentHeight = height - navbarHeight;
const chartRatio = 320 / 320;
const chartHeight = Math.ceil(width / chartRatio);

let scrollHeight = 45 + 15 + 101 + 81 + 15 + chartHeight;
scrollHeight = scrollHeight > height ? scrollHeight : height;

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