'use strict';

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

export default class CalendarModeSelector extends Component {

    static propTypes = {
        selectMode: React.PropTypes.oneOf(['day', 'week', 'month']).isRequired,
        onSelect: React.PropTypes.func,
    };

    constructor(props) {
        super(props);

        this.onSelect = this.onSelect.bind(this);
    }

    onSelect(type) {
        this.props.onSelect && this.props.onSelect(type);
    }

    render() {

        return (
            <View style={styles.container}>

                <View style={styles.seprator2} />
                {this.props.calendarModes.map((item, i) => {
                    let color = item.type === this.props.selectMode ? styles.selectText : styles.normalText;
                    return (
                        <TouchableOpacity key={i} onPress={() => this.onSelect(item.type)}>
                            <Text style={[styles.text, color]}>{item.text}</Text>
                        </TouchableOpacity>
                    );
                })}

                <View style={styles.seprator3} />
                <View style={styles.seprator4} />

            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        height: 45,
    },
    text: {
        fontSize: 14,
        textAlign: 'center',
        width: width / 3,
    },
    normalText: {
        color: '#B0B0B0',
    },
    selectText: {
        color: '#444444',
    },
    seprator1: {
        width: width,
        height: 0.5,
        backgroundColor: '#B0B0B0',
        position: 'absolute',
    },
    seprator2: {
        width: width,
        height: 0.5,
        top: 44,
        backgroundColor: '#B0B0B0',
        position: 'absolute',
    },
    seprator3: {
        width: 0.5,
        height: 15,
        top: 15,
        left: width / 3,
        backgroundColor: '#B0B0B0',
        position: 'absolute',
    },
    seprator4: {
        width: 0.5,
        height: 15,
        top: 15,
        left: width * 2 / 3,
        backgroundColor: '#B0B0B0',
        position: 'absolute',
    },
});