import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import { R } from '../../resources/';

class MainListItem extends React.Component {

    render() {
        const { icon, title, enabled, onPress } = this.props.content;
        const {
            containerStyle,
            labelTextStyle,
            iconStyle,
            dividerStyle
        } = styles;
        return (
            <TouchableOpacity onPress={onPress}>
                <View style={containerStyle}>
                    <Image source={icon} style={iconStyle} />
                    <Text style={labelTextStyle}>{title}</Text>
                    {this._renderAvailability(enabled)}
                </View>
                <View style={dividerStyle} />
            </TouchableOpacity>
        );
    }

    // It renders the arrow or "Em breve" text
    _renderAvailability(enabled) {
        const {
            arrowContainerStyle,
            soonContainerStyle,
            soonTextStyle
        } = styles;
        if (enabled) {
            return (
                <View style={arrowContainerStyle}>
                    <Image source={R.images.arrow} style={{ height: 20, width: 20 }} />
                </View>
            );
        }

        return (
            <View style={soonContainerStyle}>
                <Text style={soonTextStyle}>EM BREVE</Text>
            </View>
        );
    }
}

const styles = {
    containerStyle: {
        alignSelf: 'stretch',
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginLeft: 50,
        height: 60
    },
    labelTextStyle: {
        fontSize: 16,
        marginLeft: 20,
        color: '#1762a6'
    },
    iconStyle: {
        height: 32,
        width: 32
    },
    arrowContainerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-end',
        marginRight: 15
    },
    dividerStyle: {
        alignSelf: 'stretch',
        height: 1,
        backgroundColor: '#efefef',
        marginLeft: 50,
    },
    soonContainerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-end',
        marginRight: 15
    },
    soonTextStyle: {
        backgroundColor: '#fb435f',
        fontSize: 12,
        paddingLeft: 5,
        paddingRight: 5,
        color: '#fff'
    }
};

export default MainListItem;