'use strict'

import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    Platform,
    Dimensions,
    StyleSheet,
} from 'react-native';

export default class PostingToolBar extends Component {

    static propTypes = {
        imageCount: React.PropTypes.number,
        selectedSectionName: React.PropTypes.string,
        onPressImage: React.PropTypes.func,
        onPressTrigger: React.PropTypes.func,
        onPressSection: React.PropTypes.func,
    };

    constructor(props) {
        super(props);

    }

    componentDidMount() {

    }

    render() {
        let {imageCount, selectedSectionName, keyboardInView, imageInView} = this.props;
        let keyboardImage = keyboardInView ? require('../../images/posting/jianpan1.png') : require('../../images/posting/keyboard_normal.png');
        let picImage = imageInView ? require('../../images/posting/pic1.png') : require('../../images/posting/pic_normal.png')
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.imgIcon} onPress={() => {
                    this.props.onPressImage && this.props.onPressImage();
                }}>
                    <Image source={picImage}/>
                    {imageCount > 0 ? <Text style={styles.imageCountText}>{imageCount}</Text> : null}
                </TouchableOpacity>

                <TouchableOpacity style={styles.keyboardIcon} onPress={() => {
                    this.props.onPressTrigger && this.props.onPressTrigger();
                }}>
                    <Image style={styles.keyboardIcon} source={keyboardImage} />
                </TouchableOpacity>

                <View style={styles.rightContainer}>
                    <Text
                        style={styles.sectionName}
                        suppressHighlighting={true}
                        onPress={() => {
                            this.props.onPressSection && this.props.onPressSection();
                        }}
                    >
                        {selectedSectionName}
                    </Text>
                </View>

                <View style={styles.toolTopLine}/>
                <View style={styles.toolBottomLine}/>
            </View>
        );
    }
}

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

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems:'center',
        justifyContent: 'center',
        right:0,
        left:0,
        height: 41,
        marginBottom:0,
    },
    toolTopLine: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
    toolBottomLine: {
        position: 'absolute',
        left: 0,
        bottom: 0,
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
    imgIcon: {
        flexDirection: 'row',
        left: 15,
        width: 19,
        height: 19,
        marginRight: 29,
    },
    keyboardIcon: {
        width: 20,
        height: 20,
    },
    rightContainer: {
        flexDirection: 'column',
        alignItems: 'flex-end',
        height: 41,
        width: width-68,
    },
    sectionName: {
        fontSize:14,
        textAlign: 'center',
        height: 21,
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 3,
        marginRight: 10,
        marginTop: 10,
        backgroundColor: '#f2f2f2',
    },
    imageCountText: {
        alignItems: 'center',
        fontSize: 9,
        color: '#d0021b',
        textAlign: 'center',
        width: 15,
        height: 15,
        left: -8,
        top: -7,
        paddingTop: 1.5,
        borderRadius: 7.5,
        borderWidth: 0.5,
        borderColor: '#d0021b',
    },
});