import React, {

Component,

PropTypes,

View,

Text,

StyleSheet,

Dimensions,

Animated,

Easing,

StatusBar

} from 'react-native';

import UserOverlay from '../components/UserOverlay';

import MessageOverlay from '../components/MessageOverlay';

import ScrollableTabs from '../components/ScrollableTabs';

import * as TopicListComponent from './TopicList';

import * as Tabs from '../constants/Tabs';

import connectComponent from '../utils/connectComponent';

const TopicList = connectComponent(TopicListComponent);

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

class Home extends Component {

componentDidMount() {

const {actions} = this.props;

actions.updateTopicsByTab('all');

}

_onPageChanged(page) {

const {actions, topic, ui} = this.props;

const tab = Tabs.tabs[page];

if (topic[tab] && ui[tab] && !ui[tab].flag) {

actions.updateTopicsByTab(tab);

}

}

_renderTopicList() {

return ['good', 'ask', 'all', 'share', 'job'].map((item)=> {

return (

<TopicList router={this.props.router}

key={item}

tab={item}/>

);

});

}

render() {

const {router, user, message} = this.props;

return (

<View style={styles.container}>

<ScrollableTabs

index={0}

tabs={['精华', '问答', '主页', '分享', '招聘']}

onPageChangedAndAnimateEnd={this._onPageChanged.bind(this)}

>

{ this._renderTopicList() }

</ScrollableTabs>

<UserOverlay user={user.secret} toLogin={() => router.toLogin() }

toUser={() => router.toUser({

userName: user.publicInfo.loginname

})}/>

<MessageOverlay user={user.secret}

count={ message.unreadMessageCount }

toMessage={ () => router.toMessage() }/>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

backgroundColor: 'transparent',

flex: 1

},

bg: {

width,

height,

flexDirection: 'row',

alignItems: 'center',

justifyContent: 'center',

}

});

export const LayoutComponent = Home;

export function mapStateToProps(state) {

return {

user: state.user,

message: state.message,

topic: state.topic,

ui: state.home

}

}