'use strict';

import React from 'react-native';
const {
    Component,
    View,
    StyleSheet,
    TouchableOpacity,
    Text,
    Image,
} = React;

import Day from './Day';
import Week from './Week';
import Year from './Year';

export default class Month extends Component {
    constructor(props) {
        super(props);

        this.onPressPrev = this.onPressPrev.bind(this);
        this.onPressNext = this.onPressNext.bind(this);

        this.weekDaysLocale = props.weekDaysLocale.slice();

        if (props.startFromMonday) {
            this.weekDaysLocale.push(this.weekDaysLocale.shift());
        }

    }

    onPressPrev() {
        this.props.prevMonth && this.props.prevMonth();
    }

    onPressNext() {
        this.props.nextMonth && this.props.nextMonth();
    }

    renderContent() {
        let {
            days, weeks, months, changeSelection, style, monthsLocale,
            bodyBackColor, bodyTextColor, headerSepColor, width
        } = this.props;

        if (this.props.selectMode === 'month') {
            return (
                <View style={styles.monthContainer}>
                    <View style={styles.monthDays}>
                        {months.map((month, i) => {
                            return (
                                <Year
                                    key={i}
                                    {...this.props}
                                    disabled={month.disabled}
                                    status={month.status}
                                    month={month.month}
                                    onMonthPress={changeSelection}
                                />
                            );
                        })}
                    </View>
                </View>
            );
        } else {
            return (
                <View style={styles.monthContainer}>
                    <View style={styles.monthWeeks}>
                        <View style={[styles.weekDay, {borderColor: headerSepColor, width: width / 8, height: width / 8}]}>
                            <Text style={{color: bodyTextColor}}>周</Text>
                        </View>
                        {weeks.map((week, i) => {
                            return (
                                <Week
                                    key={i}
                                    {...this.props}
                                    disabled={week.disabled}
                                    status={week.status}
                                    week={week.week}
                                    first={week.first}
                                    onWeekPress={changeSelection}
                                />
                            );
                        })}
                    </View>

                    <View style={styles.monthDays}>
                        {this.weekDaysLocale.map((dayName, i) => {
                            return (
                                <View key={i} style={[styles.weekDay, {borderColor: headerSepColor, width: width / 8, height: width / 8}]}>
                                    <Text style={{color: bodyTextColor}}>{dayName}</Text>
                                </View>
                            );
                        })}
                        {days.map((day, i) => {
                            return (
                                <Day
                                    key={i}
                                    {...this.props}
                                    disabled={day.disabled}
                                    status={day.status}
                                    date={day.date}
                                    belongWeek={day.belongWeek}
                                    first={day.first}
                                    last={day.last}
                                    onDayPress={changeSelection}
                                />
                            );
                        })}
                    </View>
                </View>
            );
        }
    }

    render() {
        let {
            year, days, weeks, changeSelection, style, monthsLocale,
            bodyBackColor, bodyTextColor, headerSepColor, width
        } = this.props;

        let monthHeader = days[15].date.getFullYear() + '年' + monthsLocale[days[15].date.getMonth()];
        if (this.props.selectMode === 'month') {
            monthHeader = year + '年';
        }

        return (
            <View style={[style, {width: width, backgroundColor: bodyBackColor}]}>

                <View style={styles.headerContainer}>
                    <TouchableOpacity onPress={this.onPressPrev}>
                        <Image source={require('./right.png')} resizeMode={'contain'} style={styles.headerThumb}/>
                    </TouchableOpacity>
                    <Text style={[styles.monthHeader, {color: bodyTextColor}]}>
                        {monthHeader}
                    </Text>
                    <TouchableOpacity onPress={this.onPressNext}>
                        <Image source={require('./left.png')} resizeMode={'contain'} style={styles.headerThumb}/>
                    </TouchableOpacity>
                </View>



                    {this.renderContent()}


            </View>
        );
    }
}

const styles = StyleSheet.create({
    headerContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignItems: 'center',
        height: 45,
    },
    headerThumb: {
        width: 20,
        height: 15,
    },
    monthHeader: {
        width: 100,
        fontSize: 14,
        textAlign: 'center',
    },
    monthContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    monthWeeks: {
        flexDirection: 'column',
        flexWrap: 'wrap',
        flex: 1,
    },
    monthDays: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 7,
    },
    weekDay: {
        borderBottomWidth: 0,
        justifyContent: 'center',
        alignItems: 'center'
    }
});