'use strict';

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

export default class Year extends Component {
    render() {
        let {onMonthPress, width, disabled, status, month} = this.props;
        let onPress, textColor, backColor;

        if (disabled) {
            status = 'disabled';
            onPress = null;
        } else {
            onPress = () => {
                onMonthPress({
                    month
                });
            }
        }

        let borderTopLeftRadius = 5;
        let borderBottomLeftRadius = 5;
        let borderTopRightRadius = 5;
        let borderBottomRightRadius = 5;

        switch (status) {
            case 'disabled':
                backColor = this.props.dayDisabledBackColor;
                textColor = this.props.dayDisabledTextColor;
                break;

            case 'common':
                backColor = this.props.dayCommonBackColor;
                textColor = this.props.dayCommonTextColor;
                break;

            case 'selected':
                backColor = this.props.daySelectedBackColor;
                textColor = this.props.daySelectedTextColor;
                break;

            case 'inRange':
                backColor = this.props.dayInRangeBackColor;
                textColor = this.props.dayInRangeTextColor;
                break;
        }

        return (
            <TouchableOpacity
                activeOpacity={disabled ? 1 : 1}
                style={[styles.common, {backgroundColor: backColor, width: width / 4, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius,borderTopRightRadius, borderBottomRightRadius}]}
                onPress={onPress}>
                <Text style={{color: textColor}}>{month + '月'}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    common: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    }
});