'use strict';

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

export default class DateSelector extends Component {

    static propTypes = {
        date: React.PropTypes.string.isRequired,
        toogleSelector: React.PropTypes.func,
    };

    constructor(props) {
        super(props);

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

    onPress() {
        this.props.toogleSelector && this.props.toogleSelector();
    }

    render() {

        return (
            <TouchableOpacity
                activeOpacity={0.5}
                style={styles.container}
                onPress={this.onPress}>
                <Text style={styles.text}>{this.props.date}</Text>
                <Image source={require('./date.png')} style={styles.thumb} />
            </TouchableOpacity>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        height: 45,
    },
    text: {
        fontSize: 14,
        color: '#444444',
        textAlign: 'center',
    },
    thumb: {
        left: 5,
        width: 15,
        height: 15,
    },
});