'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Banner from './Banner';
import Notice from './Notice';
import Section from './Section';
import ListCell from './ListCell';

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

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

export default class Home extends React.Component {

    static propTypes = {
        dataBlob: React.PropTypes.shape({
            banner: React.PropTypes.shape({
                banner: ImmutablePropTypes.listOf(
                    ImmutablePropTypes.contains({
                        image: React.PropTypes.string.isRequired,
                        url: React.PropTypes.string,
                    }),
                ),
            }),
            notice:  React.PropTypes.shape({
                notice: ImmutablePropTypes.listOf(
                    ImmutablePropTypes.contains({
                        title: React.PropTypes.string.isRequired,
                        url: React.PropTypes.string,
                    }),
                ),
            }),
            section: React.PropTypes.shape({
                section: ImmutablePropTypes.listOf(
                    ImmutablePropTypes.contains({
                        image: React.PropTypes.string.isRequired,
                        url: React.PropTypes.string,
                    })
                ),
            }),
            recommendation: React.PropTypes.arrayOf(
                ImmutablePropTypes.contains({
                    avatar: React.PropTypes.string.isRequired,
                    name: React.PropTypes.string.isRequired,
                    timeago: React.PropTypes.string.isRequired,
                    isOwner: React.PropTypes.bool,
                    isTop: React.PropTypes.bool,
                    isLike: React.PropTypes.bool,
                    title: React.PropTypes.string,
                    desc: React.PropTypes.string,
                    thumbs: ImmutablePropTypes.listOf(
                        ImmutablePropTypes.contains({
                            url: React.PropTypes.string,
                        })
                    ),
                    section: React.PropTypes.string,
                    commentCount: React.PropTypes.number,
                    likeCount: React.PropTypes.number,
                }),
            ),
        }),
        onPressPost: React.PropTypes.func,
        onPressAvatar: React.PropTypes.func,
        onPressSectionTag: React.PropTypes.func,
        onPressComment: React.PropTypes.func,
        onPressLike: React.PropTypes.func,
    };

    constructor(props) {
        super (props);

        this._renderRow = this._renderRow.bind(this);
        this._renderSectionHeader = this._renderSectionHeader.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        switch (sectionID) {
			case 'banner':
                return (
                    <Banner
                        data={rowData}
                        width={width}
                        height={bannerHeight}
                        onPress={(url) => {
                            this.props.onPressBanner && this.props.onPressBanner(url);
                        }}
                    />
                );
			case 'notice':
				return (
                    <Notice
                        data={rowData}
                        width={width}
                        height={40}
                        onPress={(url) => {
                            this.props.onPressNotice && this.props.onPressNotice(url);
                        }}
                    />
				);
			case 'section':
                return (
                    <Section
                        data={rowData}
                        width={width}
                        height={210}
                        onPress={(url) => {
                            this.props._onPressSection && this.props._onPressSection(url);
                        }}
                    />
                );
			case 'recommendation':
				return (
                    <ListCell
                        key={sectionID + rowID}
                        data={rowData}
                        onPressPost={(url) => {
                            this.props.onPressPost && this.props.onPressPost(url);
                        }}
                        onPressAvatar={(url) => {
                            this.props.onPressAvatar && this.props.onPressAvatar(url);
                        }}
                        onPressSectionTag={(url) => {
                            this.props.onPressSectionTag && this.props.onPressSectionTag(url);
                        }}
                        onPressComment={(url) => {
                            this.props.onPressComment && this.props.onPressComment(url);
                        }}
                        onPressLike={(url) => {
                            this.props.onPressLike && this.props.onPressLike(url);
                        }}
                    />
				);
		}
    }

    _renderSectionHeader(sectionData, sectionID) {
        switch (sectionID) {
			case 'banner':
			case 'notice':
			case 'section':
                return null;
			case 'recommendation':
				return (
                    <View style={styles.sectionHeader}>
                        <Image style={styles.sectionHeaderImg} source={require('../../images/home/hot.png')}/>
                        <Text style={styles.sectionHeaderText}>热门推荐</Text>
                        <View style={styles.sectionHeaderLine}/>
                    </View>
				);
		}
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (
            <View key={'separator' + sectionID + rowID} style={styles.separator}/>
        );
    }

	render() {

        return (
            <ListView
                dataSource={this.dataSource.cloneWithRowsAndSections(this.props.dataBlob)}
                renderRow={this._renderRow}
                renderSectionHeader={this._renderSectionHeader}
                renderSeparator={this._renderSeparator}
                enableEmptySections={true}
            />
        );

    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    sectionHeader: {
        flexDirection: 'row',
        height: 32,
        alignItems: 'center',
        backgroundColor: 'white',
    },
    sectionHeaderImg: {
        width: 9,
        height: 12,
        marginLeft: 17,
    },
    sectionHeaderText: {
        fontSize: 12,
        marginLeft: 5,
    },
    sectionHeaderLine: {
        position: 'absolute',
        left: 17,
        bottom: 0,
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },

});