'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import ImmutablePropTypes from 'react-immutable-proptypes';

import UserCenterTop from './user/UserCenterTop';
import CommunityList from './CommonComp/CommunityList';
import ReplyList from './user/ReplyList';
import ParallaxView from './CommonComp/ParallaxView';


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

export default class User extends React.Component {

    static propTypes = {
        dataBlob: React.PropTypes.shape({
            userInfo: React.PropTypes.shape({
                userInfo: ImmutablePropTypes.listOf(
                    ImmutablePropTypes.contains({
                        avatar: React.PropTypes.string,
                        bgImage:React.PropTypes.string,
                        userName:React.PropTypes.string.isRequired,
                        sign: React.PropTypes.string,
                    }),
                ),
            }),

            posts: 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,
                }),
            ),

            like: 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,
                }),
            ),

            reply:React.PropTypes.arrayOf(
                ImmutablePropTypes.contains({
                    postInfo: ImmutablePropTypes.contains({
                        title: React.PropTypes.string,
                        type: React.PropTypes.string.isRequired,
                    }),

                    blocks: ImmutablePropTypes.listOf(
                        ImmutablePropTypes.contains({
                            commentId: React.PropTypes.number,
                            orderBy: React.PropTypes.number,
                            content: React.PropTypes.string,
                            templateKey: React.PropTypes.string.isRequired,
                        })
                    ),

                    reply: ImmutablePropTypes.contains({
                        headIcon: React.PropTypes.string,
                        uid: React.PropTypes.number,
                        name: React.PropTypes.string,
                    }),

                    replyTo: ImmutablePropTypes.contains({
                        headIcon: React.PropTypes.string,
                        uid: React.PropTypes.number,
                        name: React.PropTypes.string,
                    }),

                    id: React.PropTypes.number,
                    postId: React.PropTypes.number,
                    createTime: React.PropTypes.number.isRequired,
                    authorUid: React.PropTypes.number,


                }),
            ),


        }),



        onPressUserAvatar: React.PropTypes.func,
        onPressComment: React.PropTypes.func,
        onPressLike: React.PropTypes.func,
        onPressPosts: React.PropTypes.func,
    };


    constructor(props) {
        super (props);
    }

    _showModifyUserInfoActionSheet() {

    }

    _showModifyBackgroundImgActionSheet() {

    }

    render() {
        return (

            <View style={styles.container}>

                <UserCenterTop
                    userInfo={this.props.dataBlob.userInfo}
                    onPressUserAvatar={this.props.onPressUserAvatar}
                    onPressBackgroundImg={this.props.onPressBackgroundImg}

                />

                <ScrollableTabView style={styles.bottom}>
                    <CommunityList
                        bounces={false}
                        tabLabel="我的帖子"
                        jsonData={this.props.dataBlob.posts}
                        onPressAvatar={(url) => {
                            this.props.onPressAvatar && this.props.onPressAvatar(url);
                        }}
                        onPressComment={(url) => {
                            this.props.onPressComment && this.props.onPressComment(url);
                        }}
                        onPressLike={(url) => {
                            this.props.onPressLike && this.props.onPressLike(url);
                        }}
                    />

                    <CommunityList
                        tabLabel="我赞过的"
                        jsonData={this.props.dataBlob.like}
                        onPressAvatar={(url) => {
                            this.props.onPressAvatar && this.props.onPressAvatar(url);
                        }}
                        onPressComment={(url) => {
                            this.props.onPressComment && this.props.onPressComment(url);
                        }}
                        onPressLike={(url) => {
                            this.props.onPressLike && this.props.onPressLike(url);
                        }}

                    />

                    <ReplyList
                        tabLabel="我的回复"
                        jsonData={this.props.dataBlob.reply}
                        onPressAvatar={(url) => {
                            this.props.onPressAvatar && this.props.onPressAvatar(url);
                        }}
                        onPressReply={(url) => {
                            this.props.onPressReply && this.props.onPressReply(url);
                        }}
                        onPressPosts={(url) => {
                            this.props.onPressPosts && this.props.onPressPosts(url);
                        }}

                    />

                </ScrollableTabView>
            </View>

        )
    }
}


let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;

let styles = StyleSheet.create({
    container: {
        top: 0,
        height: height,
        backgroundColor: 'transparent',
        // backgroundColor: 'red',
        // flexDirection: 'column',
        // justifyContent: 'center',
    },

    top: {

    },

    bottom: {
        backgroundColor: 'transparent',
    }
});