'use strict';

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

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

export default class KeywordHeader extends React.Component {

    constructor(props) {
        super (props);

    }

    renderAction() {
        if (this.props.onPressAction) {
            return (
                <TouchableOpacity style={styles.action} onPress={() => {
                    this.props.onPressAction && this.props.onPressAction();
                }}>
                    <Image
                        style={styles.delete}
                        source={require('../../images/shanchu.png')}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
            );
        }

        return null;
    }

    render() {
        let {icon, title, onPressAction} = this.props;
        return (
            <View style={styles.container}>
                <Image
                    style={styles.icon}
                    source={icon}
                    resizeMode={'contain'}
                />
                <Text style={styles.text}>{title}</Text>

                {this.renderAction()}
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        width: Dimensions.get('window').width,
        height: 40,
    },
    icon: {
        marginLeft: 15,
        width: 13, 
        height: 17,
    },
    text: {
        marginLeft: 10,
        color: '#b0b0b0',
        fontSize: 12,        
    },
    action: {
        position: 'absolute',
        right: 10,
        height: 40,
    },
    delete: {
        width: 28,
        height: 28,
        top: 6,
    },
});