'use strict';

import React from 'react';
import ReactNative from 'react-native';
import PlainTextSection from './PlainTextSection';
import TrendTextSection from './TrendTextSection';
import Placeholder from './Placeholder';
import Category from './Category';

const {
    Component,
} = React;

const {
    View,
    Text,
    ScrollView,
    Platform,
} = ReactNative;

export default class Home extends Component {

    static propTypes = {
        section1: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                top: React.PropTypes.string,
                bottom: React.PropTypes.string,
                small: React.PropTypes.string,
                style: View.propTypes.style,
            })
        ),
        section2: 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,
            })
        ),
        section3: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                type: React.PropTypes.string,
                thumb: React.PropTypes.number,
                title: React.PropTypes.string,
            })
        ),
        onPressCategory: React.PropTypes.func,
    };

	render() {

        return (
            <ScrollView>

                <TrendTextSection content={this.props.section1} />
                <Placeholder />
                <PlainTextSection content={this.props.section2} />
                <Placeholder />
                <Category content={this.props.section3} onPress={this.props.onPressCategory} />

            </ScrollView>
        );

    }
}