'use strict';

import React from 'react-native';

let {
    StyleSheet,
    Component,
    View,
    Text,
    ListView,
    Image,
    TouchableHighlight,
} = React;

export default class User extends Component {

    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    }

    componentWillMount() {
        this._renderRow = this._renderRow.bind(this);
    }

	render() {
        let items = this.props.items;

        return (
            <ListView
                dataSource={this.ds.cloneWithRows(this.props.items)}
                renderRow={this._renderRow}
                renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
                style={styles.listView}/>
        );
    }

    _renderRow(item) {
        let icon = item.icon;
        return (
            <TouchableHighlight underlayColor={'white'} onPress={() => this.props.onItemPressed(item)}>
                <View style={styles.row}>
                    <Image source={item.icon}/>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text>{item.subtitle}</Text>
                    <Image source={item.arrow} />
                </View>
            </TouchableHighlight>
        );
    }
}



const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        height: 45,
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#F5FCFF',
    },
    title: {
        flex: 1,
        color: '#444444',
        fontSize: 14,
        marginLeft: 10,
    },
    subtitle: {
        padding: 5,
    },
    image: {
        padding: 10,
    },
    listView: {
        marginTop: 56,

    },
    separator: {
        height: 1,

    },
});