'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import DeviceInfo from 'react-native-device-info';

const {
    View,
    Text,
    TouchableOpacity,
    Dimensions,
    StyleSheet,
	Platform,
	Image,
} = ReactNative;

export default class ScreenSubCell extends React.Component {

    constructor(props) {
        super (props);
    }

    render() {
		let resource = this.props.resource?this.props.resource:null;
        let keys = this.props.keys?this.props.keys:null;
		if (!resource) {
			return null;
		}
		let isSelect = resource.isSelect;
        let key = resource.key;
        let name = resource.name;

		return (
			<View style={styles.container}>
				<TouchableOpacity onPress={() => {this.props.selectItem && this.props.selectItem(resource,keys)}} >
					<View style={styles.cell}>
						<Text style={styles.name}>{name}</Text>
						{isSelect?<Image style={styles.arrow} source={require('../../images/select_icon_20_h.png')}/>:null}
					</View>
					<View style={{width: width,height: 0.5,backgroundColor: 'rgb(235, 235, 235)'}}/>
				</TouchableOpacity>
			</View>
		);
    }
}

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

let styles = StyleSheet.create({
	container: {
		width: backgroundWidth,
		height: backgroundHeight,
		alignItems: 'center',
	},

	cell: {
		width: backgroundWidth,
		height: backgroundHeight-0.5,
		backgroundColor: '#f0f0f0',
		flexDirection: 'row',
		alignItems: 'center',
	},
	name: {
		marginLeft: 10,
		color: 'rgb(146, 146, 146)'
	},
	arrow: {
        width: 15,
		height: 15,
		position: 'absolute',
		marginVertical: (backgroundHeight - 15 )/2,
		right: 10,
	},
});