'use strict';

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

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

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

export default class SectionHeader extends React.Component {

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

    constructor(props) {
        super (props);

    }

    render() {
        let {uri, desc, post, comment, like} = this.props.data.toJS();
        return (
            <Image 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>

            </Image>
        );
    }
}

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