'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,
    RefreshControl,
    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 = {
        banner: ImmutablePropTypes.listOf(
            ImmutablePropTypes.listOf(
                ImmutablePropTypes.contains({
                    image: React.PropTypes.string.isRequired,
                    url: React.PropTypes.string,
                }),
            ),
        ),
        notice: ImmutablePropTypes.listOf(
            ImmutablePropTypes.listOf(
                ImmutablePropTypes.contains({
                    title: React.PropTypes.string.isRequired,
                    url: React.PropTypes.string,
                }),
            ),
        ),
        section: ImmutablePropTypes.listOf(
            ImmutablePropTypes.listOf(
                ImmutablePropTypes.contains({
                    image: React.PropTypes.string.isRequired,
                    url: React.PropTypes.string,
                })
            ),
        ),
        recommendation: ImmutablePropTypes.listOf(
            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':
            console.log(rowData);
				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() {
        let dataSource = {
            banner: this.props.banner.toObject(),
            notice: this.props.notice.toObject(),
            section: this.props.section.toObject(),
            recommendation: this.props.recommendation.toArray(),
        }
        return (
            <ListView
                dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                renderRow={this._renderRow}
                renderSectionHeader={this._renderSectionHeader}
                renderSeparator={this._renderSeparator}
                enableEmptySections={true}
                refreshControl={
                    <RefreshControl
                        refreshing={this.props.refreshing}
                        onRefresh={() => {
                            this.props.onRefresh && this.props.onRefresh();
                        }}
                    />
                }
            />
        );

    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    sectionHeader: {
        flexDirection: 'row',
        height: 32,
        alignItems: 'center',
        backgroundColor: 'white',
        borderTopWidth: 0.5,
        borderTopColor: '#e0e0e0',
    },
    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',
    },

});