'use strict';

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

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

import Immutable, {Map, List} from 'immutable';
import {Actions} from 'react-native-router-flux';

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

import * as homeActions from '../reducers/home/homeActions';
import * as appActions from '../reducers/app/appActions';
import * as userActions from '../reducers/user/userActions';
import * as postingActions from '../reducers/posting/postingActions';


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

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

/**
 *  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
    };
}

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

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._onEndReached = this._onEndReached.bind(this);
        this._onUploadRetry = this._onUploadRetry.bind(this);
        this._onUploadDelete = this._onUploadDelete.bind(this);
        this._onUploadSuccess = this._onUploadSuccess.bind(this);
        this._onSaveingTheWorld = this._onSaveingTheWorld.bind(this);

        this.triggerPullToRefresh = this.triggerPullToRefresh.bind(this);

        if (parseInt(this.props.app.container) === 1) {
            this.subscription = NativeAppEventEmitter.addListener(
                'ChannelReminder',
                (reminder) => {
                    this.props.actions.setChannel(reminder.channel);
                    Actions.refresh({channel: reminder.channel});
                }
            );
        }

        this.subscription2 = NativeAppEventEmitter.addListener(
            'UserDidLoginReminder',
            (reminder) => {
                let uid = reminder.uid;
                this.props.actions.setUid(uid);
                this.triggerPullToRefresh();
            }
        );

        this.subscription3 = NativeAppEventEmitter.addListener(
            'UserDidLogoutReminder',
            (reminder) => {
                this.props.actions.userDidLogout();
                this.props.actions.postingEventLogOut();
                this.triggerPullToRefresh();
            }
        );

        this.subscription4 = NativeAppEventEmitter.addListener(
            'UserNickNameDidUpdateReminder',
            (reminder) => {
                this.props.actions.newNickName(reminder.nickName);
            }
        );

        this.subscription5 = NativeAppEventEmitter.addListener(
            'UserHeaderDidUpdateReminder',
            (reminder) => {
                this.props.actions.newAvatar(reminder.avatar);
            }
        );
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        if (parseInt(this.props.app.container) === 1) {
            this.subscription && this.subscription.remove();
        }

        this.subscription2 && this.subscription2.remove();
        this.subscription3 && this.subscription3.remove();
        this.subscription4 && this.subscription4.remove();
        this.subscription5 && this.subscription5.remove();
    }

    triggerPullToRefresh() {
        this.home && this.home.triggerPullToRefresh();
    }

    _onPressBanner(url) {
        this.props.actions.goAction(url);
    }

    _onPressNotice(url) {
        this.props.actions.goAction(url);
    }

    _onPressSection(section) {
        this.props.actions.goToSection(section);
    }

    _onPressPost(id) {
        this.props.actions.goToPost(id);
    }

    _onPressAvatar(uid) {
        this.props.actions.goToUserOrMe(uid);
    }

    _onPressSectionTag(section) {
        this.props.actions.goToSection(section);
    }

    _onPressComment(id) {
        this.props.actions.goToPost(id);
    }

    _onPressLike(post) {
        this.props.actions.likeOperation(post);
    }

    _onRefresh() {
        InteractionManager.runAfterInteractions(() => {
            let uid = this.props.user.profile.uid;
            if (uid) {
                this.props.actions.syncUserWithSSOUid(uid);
            }
            this.props.actions.bannerNoticeSection();
            this.props.actions.recommendation(true);
        });
    }

    _onEndReached() {
        InteractionManager.runAfterInteractions(() => {
            this.props.actions.recommendation(false);
        });
    }

    _onUploadSuccess() {
        this.props.actions.resetState();
    }

    _onUploadRetry() {
        this.props.actions.startPosting();
    }

    _onUploadDelete() {
        this.props.actions.resetState();
    }

    _onSaveingTheWorld() {
        this.props.actions.goToUser();
    }

	render() {
        let {postState, post} = this.props.posting;

        let assetsData = post.assets.toJS();
        let percent = postState.uploadedImagePercent;
        let uri = '';
        if (assetsData.length) {
            uri = assetsData[0].uri;
        } else {
            percent = 1;
        }

        let progressing = [];
        if (postState.showProcess) {
            progressing = [{
                uploadState: postState.status, //(1发布中，2发布成功，3发布失败)
                progress: percent,//(0~1)
                image: uri,
                postingBannerShow: postState.showProcess,
            }];
        }

        progressing = Immutable.fromJS(progressing);

        let {banner, notice, section, recommendation, ptr, error, isFetching} = this.props.home;
        let bannerData = Immutable.fromJS([banner.list]);
        let noticeData = notice.open === 'Y' ? Immutable.fromJS([notice.list]) : List();
        let sectionData = Immutable.fromJS([section]);
        let recommendationData = Immutable.fromJS(recommendation.list);

        let {profile} = this.props.user;

        let containerStyle = parseInt(this.props.app.container) === 1 ? null : {marginBottom: 64};


        let scrollToTop = false;
        if (this.props.route.scene && this.props.route.scene.sceneKey == 'Posting') {
            if (this.props.posting.canSubmit) {
                scrollToTop = true;
            }
        }

        let isUserStateFetching = this.props.posting.userState.isFetching && this.props.route.scene.sceneKey == 'Home';

        return (
            <View style={[styles.container, containerStyle]}>
                <Home
                    ref={(c) => {
                        this.home = c;
                    }}
                    progressing={progressing}
                    banner={bannerData}
                    bannerDuration={banner.duration}
                    notice={noticeData}
                    noticeOpen={notice.open}
                    noticeDuration={notice.duration}
                    section={sectionData}
                    recommendation={recommendationData}
                    user={profile}
                    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}
                    isFetching={recommendation.isFetching}
                    endReached={recommendation.endReached}
                    isRefreshing={isFetching}
                    isLoadingMore={!ptr && recommendation.isFetching}
                    onEndReached={this._onEndReached}
                    onUploadSuccess={this._onUploadSuccess}
                    onUploadRetry={this._onUploadRetry}
                    onUploadDelete={this._onUploadDelete}
                    onSaveingTheWorld={this._onSaveingTheWorld}
                    scrollToTop={scrollToTop}
                    isUserStateFetching={isUserStateFetching}
                />
            </View>
        );
    }
}

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

});

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