'use strict';

import React from 'react';
import ReactNative from 'react-native';

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

import KeywordHeader from './KeywordHeader';
import KeywordText from './KeywordText';

export default class KeywordCell extends React.Component {

    constructor(props) {
        super (props);

    }

    render() {

        let {icon, title, list, onPressAction, onPressKeyword} = this.props;
        
        return (
            <View style={styles.container}>
                <KeywordHeader
                    icon={icon}
                    title={title}
                    onPressAction={onPressAction}
                />
                <View style={styles.textContainer}>
                    {list.toJS().map((item, i) => {
                        return <KeywordText key={i} keyword={item.keyword} androiddata={item.androiddata} onPressKeyword={onPressKeyword}/>;
                    })}
                </View>
                
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {

    },
    textContainer: {
        marginHorizontal: 26,
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
});