'use strict';

import React from 'react';
import ReactNative from 'react-native';

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import Immutable, {Map} from 'immutable';

import Home from '../components/home/Home';

import * as homeActions from '../reducers/home/homeActions';

import {Actions} from 'react-native-router-flux';

const {
    StatusBar,
    View,
    StyleSheet,
    Dimensions,
    Platform,
    NativeModules
} = ReactNative;

/**
 * ## Actions
 * 3 of our actions will be available as ```actions```
 */
const actions = [
    homeActions,
];

/**
 *  Save that state
 */
function mapStateToProps(state) {
    return {
        ...state
    };
}

/**
 * Bind all the functions from the ```actions``` and bind them with
 * ```dispatch```
 */
function mapDispatchToProps(dispatch) {

    const creators = Map()
        .merge(...actions)
        .filter(value => typeof value === 'function')
        .toObject();

    return {
        actions: bindActionCreators(creators, dispatch),
        dispatch
    };
}

class HomeContainer extends React.Component {

    constructor(props) {
        super(props);

        this._onPressBanner = this._onPressBanner.bind(this);
        this._onPressNotice = this._onPressNotice.bind(this);
        this._onPressSection = this._onPressSection.bind(this);
        this._onPressPost = this._onPressPost.bind(this);
        this._onPressAvatar = this._onPressAvatar.bind(this);
        this._onPressSectionTag = this._onPressSectionTag.bind(this);
        this._onPressComment = this._onPressComment.bind(this);
        this._onPressLike = this._onPressLike.bind(this);
        this._onRefresh = this._onRefresh.bind(this);

        this.state = {
            refreshing: false,
        }
    }

    componentDidMount() {
        let RNNativeConfig = NativeModules.RNNativeConfig;
        RNNativeConfig.hideNavBar();
        this.props.actions.recommendation();
    }

    _onPressBanner(url) {
        console.log('banner');

        Actions.Section();
    }

    _onPressNotice(url) {
        console.log('notice');
    }

    _onPressSection(url) {
        console.log('section');
    }

    _onPressPost(url) {
        console.log('post');
    }

    _onPressAvatar(url) {
        console.log('avatar');
    }

    _onPressSectionTag(url) {
        console.log('section tag');
    }

    _onPressComment(url) {
        console.log('comment');
    }

    _onPressLike(url) {
        console.log('like');
    }

    _onRefresh() {
        this.setState({
            refreshing: true
        });
        return new Promise((resolve) => setTimeout(resolve, 1000)).then(() => {
            this.setState({
                refreshing: false
            });
        });
    }

	render() {


        let banner = [
            [
                {
                    image: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/17/0180ef2077db7ec5117756e47c0b61a7b1.jpg?imageView2/2/w/640/h/240',
                    url: 'https://www.baidu.com'
                },
                {
                    image: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    url: 'https://www.baidu.com'
                },
                {
                    image: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/12/01dcc29b14bdd04d9051c2e5ce40fe6516.jpg?imageView2/2/w/640/h/240',
                    url: 'https://www.baidu.com'
                },
                {
                    image: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/17/0180ef2077db7ec5117756e47c0b61a7b1.jpg?imageView2/2/w/640/h/240',
                    url: 'https://www.baidu.com'
                },
                {
                    image: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    url: 'https://www.baidu.com'
                },
                {
                    image: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/12/01dcc29b14bdd04d9051c2e5ce40fe6516.jpg?imageView2/2/w/640/h/240',
                    url: 'https://www.baidu.com'
                },
            ],
        ];
        let notice = [
            [
                {
                    title: 'Yoho!Buy特邀摄影师大赛开始报名啦！大赛开始报名啦！',
                    url: 'https://www.baidu.com'
                },
                {
                    title: 'Yoho!Buy特邀摄影师大赛开始报名啦！22222大赛开始报名啦！',
                    url: 'https://www.baidu.com'
                },
                {
                    title: 'Yoho!Buy特邀摄影师大赛开始报名啦！33333大赛开始报名啦！',
                    url: 'https://www.baidu.com'
                },
            ],
        ];
        let section = [
            [
                {
                    header: {
                        logo: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/12/01dcc29b14bdd04d9051c2e5ce40fe6516.jpg?imageView2/2/w/640/h/240',
                        title: '永恒的潮流1111',
                        postNum: '1222',
                        commentNum: '3444',
                        laudCount: '6765',
                    },
                    hot: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    new: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    num: {
                        onedayAddNum: '233334',
                    }
                },
                {
                    header: {
                        logo: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/12/01dcc29b14bdd04d9051c2e5ce40fe6516.jpg?imageView2/2/w/640/h/240',
                        title: '永恒的潮流2222',
                        postNum: '2222',
                        commentNum: '222',
                        laudCount: '2222',
                    },
                    hot: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    new: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    num: {
                        onedayAddNum: '2222',
                    }
                },
                {
                    header: {
                        logo: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/12/01dcc29b14bdd04d9051c2e5ce40fe6516.jpg?imageView2/2/w/640/h/240',
                        title: '永恒的潮流3333',
                        postNum: '3333',
                        commentNum: '3333',
                        laudCount: '3333',
                    },
                    hot: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    new: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    num: {
                        onedayAddNum: '33333',
                    }
                },
                {
                    header: {
                        logo: 'https://img10.static.yhbimg.com/yhb-img01/2016/06/28/12/01dcc29b14bdd04d9051c2e5ce40fe6516.jpg?imageView2/2/w/640/h/240',
                        title: '永恒的潮流4444',
                        postNum: '4444',
                        commentNum: '4444',
                        laudCount: '4444',
                    },
                    hot: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    new: {
                        avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        content: '学院风的格子衫可能是每个男生衣橱里都会有的单件衣服学院风的格子衫可能是每个男生衣橱里都会有的单件衣服',
                    },
                    num: {
                        onedayAddNum: '4444',
                    }
                },
            ],
        ];
        let recommendation = [
                {
                    avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    name: '余文乐',
                    timeago: '2小时前',
                    isOwner: false,
                    isTop: true,
                    isLike: true,
                    title: 'Yoho!Buy特邀摄影师大赛开始报名啦！111',
                    desc: 'MADNESS作为“六叔”余文乐的个人品牌，经过几个季度的产品表现，相信大家都知道这并不是玩票性质，而是余文乐在做心中的街头品牌。此番MADNESS正式迎来2016春夏的开季，以Los Angeles作为拍摄地点，延续余文乐一直喜欢的简约风格',
                    thumbs: [
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        },
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        },
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        }
                    ],
                    section: '永恒的潮流',
                    commentCount: 123,
                    likeCount: 45678,
                    url: 'https://www.baidu.com'
                },
                {
                    avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    name: '余文乐',
                    timeago: '2小时前',
                    isOwner: true,
                    isTop: false,
                    isLike: false,
                    title: 'Yoho!Buy特邀摄影师大赛开始报名啦！222',
                    desc: 'MADNESS作为“六叔”余文乐的个人品牌，经过几个季度的产品表现，相信大家都知道这并不是玩票性质，而是余文乐在做心中的街头品牌。此番MADNESS正式迎来2016春夏的开季，以Los Angeles作为拍摄地点，延续余文乐一直喜欢的简约风格',
                    thumbs: [
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        },
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        },
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        }
                    ],
                    section: '永恒的潮流',
                    commentCount: 123,
                    likeCount: 45678,
                    url: 'https://www.baidu.com'
                },
                {
                    avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    name: '余文乐',
                    timeago: '2小时前',
                    isOwner: false,
                    isTop: false,
                    isLike: true,
                    title: 'Yoho!Buy特邀摄影师大赛开始报名啦！333',
                    desc: 'MADNESS作为“六叔”余文乐的个人品牌，经过几个季度的产品表现，相信大家都知道这并不是玩票性质，而是余文乐在做心中的街头品牌。此番MADNESS正式迎来2016春夏的开季，以Los Angeles作为拍摄地点，延续余文乐一直喜欢的简约风格',
                    thumbs: [
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        },
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        },
                        {
                            url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                        }
                    ],
                    section: '永恒的潮流',
                    commentCount: 123,
                    likeCount: 45678,
                    url: 'https://www.baidu.com'
                },
        ];

        banner = Immutable.fromJS(banner);
        notice = Immutable.fromJS(notice);
        section = Immutable.fromJS(section);
        recommendation = Immutable.fromJS(recommendation);

        return (
            <View style={styles.container}>
                <StatusBar
                    hidden={false}
                    barStyle={'light-content'}
                />
                <Home
                    banner={banner}
                    notice={notice}
                    section={section}
                    recommendation={recommendation}
                    onPressBanner={this._onPressBanner}
                    onPressNotice={this._onPressNotice}
                    onPressSection={this._onPressSection}
                    onPressPost={this._onPressPost}
                    onPressAvatar={this._onPressAvatar}
                    onPressSectionTag={this._onPressSectionTag}
                    onPressComment={this._onPressComment}
                    onPressLike={this._onPressLike}
                    onRefresh={this._onRefresh}
                    refreshing={this.state.refreshing}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        top: navbarHeight,
        height: height - navbarHeight - 49,
        flex: 1,
    },

});

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer);