'use strict';

import React from 'react';
import ReactNative from 'react-native';
const {
    Component,
} = React;

const {
    StyleSheet,
    TouchableOpacity,
    Text,
} = ReactNative;

export default class Day extends Component {
    render() {
        let {week, status, disabled, onWeekPress, width, first} = this.props;
        let onPress, textColor, backColor;

        if (disabled) {
            status = 'disabled';
            onPress = null;
        } else {
            onPress = () => {
                onWeekPress({
                    belongWeek: week,
                });
            }
        }

        let borderTopLeftRadius = first ? 5 : 0;
        let borderBottomLeftRadius = first ? 5 : 0;

        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 / 8, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius}]}
                onPress={onPress}>
                <Text style={{color: textColor}}>{week}</Text>
            </TouchableOpacity>
        );
    }
}

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