'use strict';

import React from 'react';
import ReactNative from 'react-native';
import PlainText from './PlainText';
import TrendText from './TrendText';

const {
    Component,
} = React;


const {
    View,
    Text,
    Platform,
    StyleSheet,
    Dimensions,
} = ReactNative;


export default class TrendTextSection extends Component {

    static propTypes = {
        containerStyle: View.propTypes.style,
        content: React.PropTypes.arrayOf(
        	React.PropTypes.shape({
      			top: React.PropTypes.string,
      			bottom: React.PropTypes.string,
                small: React.PropTypes.string,
      			style: View.propTypes.style,
                arrowUp: React.PropTypes.bool,
                hasTrendData: React.PropTypes.bool,
    		})
        ),
    };

	render() {

        let item1 = this.props.content[0];
        let item2 = this.props.content[1];

        return (
            <View style={[styles.container, this.props.containerStyle]}>
                <PlainText
                    topText={item1.top}
                    bottomText={item1.bottom}
                    containerStyle={[styles.contentContainerStyle, item1.style]}
                />

                <TrendText
                    topText={item2.top}
                    bottomText={item2.bottom}
                    arrowUp={item2.arrowUp}
                    smallText={item2.small}
                    hasTrendData={item2.hasTrendData}
                    containerStyle={[styles.contentContainerStyle, item2.style]}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        backgroundColor: 'white',
        width,
    },
    contentContainerStyle: {
        width: width / 2,
    },

});