'use strict';

import React from 'react-native';


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


export default class Category extends Component {

    static propTypes = {
        content: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                type: React.PropTypes.string,
                thumb: React.PropTypes.number,
                title: React.PropTypes.string,
            })
        ),
        onPress: React.PropTypes.func,
    };

    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._pressRow = this._pressRow.bind(this);

        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.dataSource = ds.cloneWithRows(this.props.content);
    }

    _pressRow(rowID) {
        this.props.onPress && this.props.onPress(rowID);
    }

    _renderRow(rowData, sectionID, rowID) {
        return (
            <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor={'white'} >
                <View style={styles.row}>
                    <Image style={styles.thumb} source={rowData.thumb} />
                    <Text style={styles.text}>
                        {rowData.title}
                    </Text>
                </View>
            </TouchableHighlight>
        );
    }

	render() {
        return (
            <ListView
                contentContainerStyle={styles.container}
                dataSource={this.dataSource}
                renderRow={this._renderRow}
            />
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    row: {
        width: width / 3,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 10,
    },
    image: {
        width: 60,
        height: 60,
    },
    text: {
        margin: 8,
        fontSize: 12,
        color: '#444444',
        textAlign: 'center',
    },

});