'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';

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

let {width, height} = Dimensions.get('window');
let thumbHeight = Math.ceil(276 / 750 * width);

export default class SectionHeader extends React.Component {

    static propTypes = {
        data: ImmutablePropTypes.contains({
            uri: PropTypes.string.isRequired,
            title: PropTypes.string,
            desc: PropTypes.string.isRequired,
            post: PropTypes.string.isRequired,
            comment: PropTypes.string.isRequired,
            like: PropTypes.string.isRequired,
        }),
    };

    constructor(props) {
        super (props);

    }

    render() {
        let {uri, desc, post, comment, like} = this.props.data.toJS();
        return (
            <ImageBackground style={[styles.container, this.props.style]} source={{uri}} resizeMode={'cover'}>
                <Text style={styles.desc}>{desc}</Text>
                <View style={styles.stats}>
                    <Text style={[styles.content, {flex: 0.3}]} numberOfLines={1}>{'帖子' + post}</Text>
                    <Text style={styles.content}>|</Text>
                    <Text style={[styles.content, {flex: 0.3}]} numberOfLines={1}>{'回复' + comment}</Text>
                    <Text style={styles.content}>|</Text>
                    <Text style={[styles.content, {flex: 0.3}]} numberOfLines={1}>{'赞' + like}</Text>
                </View>

            </ImageBackground>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        // alignItems: 'center',
        backgroundColor: '#b0b0b0',
        width: width,
        height: thumbHeight,
    },
    desc: {
        color: 'white',
        // fontFamily: 'SourceHanSansCN Normal',
        fontSize: 24,
        marginTop: 42,
        textAlign: 'center',
        backgroundColor: 'transparent',
    },
    stats: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 18,
        marginBottom: 44,
    },
    content: {
        color: 'white',
        // fontFamily: 'SourceHanSansCN Normal',
        fontSize: 12,
        textAlign: 'center',
        backgroundColor: 'transparent',
    },
    line: {
        color: 'white',
        fontSize: 10,
    },
});