'use strict';

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

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

export default class KeywordText extends React.Component {

    constructor(props) {
        super (props);

        this.state = {
            helight: false,
        }
    }

    render() {
        let {index, keyword, androiddata, onPressKeyword} = this.props;
        let textColor = this.state.helight ? {color: 'rgb(66, 66, 66)'} : {color: 'rgb(191, 191, 191)'};
        return (
            <TouchableHighlight
                style={styles.container}
                underlayColor={'rgb(255, 255, 255)'}
                onPress={() => {
                    onPressKeyword && onPressKeyword(keyword, androiddata, index);
                }}
                onPressIn={() => {
                    this.setState({
                        helight: !this.state.helight,
                    });
                }}
                onPressOut={() => {
                    this.setState({
                        helight: !this.state.helight,
                    });
                }}
            >
                <Text style={[styles.text, textColor]} numberOfLines={1}>{keyword}</Text>
            </TouchableHighlight>
        );
    }
}
let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        alignSelf: 'flex-start',
        height: 25,
        backgroundColor: 'rgb(255, 255, 255)',
        borderColor: 'rgb(191, 191, 191)',
        borderRadius: 3,
        borderWidth: 1,
        margin: 4,
        maxWidth: width - 52,
    },
    text: {
        marginHorizontal: 10,
        marginVertical: 6,
        fontSize: 13,
        maxWidth: width - 64,
    },
});