'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 Section from '../components/section/Section';

import * as sectionActions from '../reducers/section/sectionActions';

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


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

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

/**
 *  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 SectionContainer extends React.Component {

    constructor(props) {
        super(props);

        this._onPressBanner = this._onPressBanner.bind(this);
        this._onPressNotice = this._onPressNotice.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);
    }

    componentDidMount() {
        if (this.props.section.previousScene === 'Home') {
            ReactNative.NativeModules.YH_CommunityHelper.hideTabBar();
        }

        InteractionManager.runAfterInteractions(() => {
            this._onRefresh();
        });
    }

    componentWillUnmount() {
        if (this.props.section.previousScene === 'Home') {
            Actions.refresh({key: 'Home', showNativeTabBar: true});
        }

        this.props.actions.sectionClean();
    }

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

    }

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

    _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.props.actions.header();
        this.props.actions.hotPost(true);
        this.props.actions.newPost(true);

        this.props.actions.setActiveTab(0);
    }

    _onEndReached(page) {
        InteractionManager.runAfterInteractions(() => {
            this.props.actions.setActiveTab(page);
            if (page === 1) {
                this.props.actions.hotPost(false);
            } else {
                this.props.actions.newPost(false);
            }
        });
    }

	render() {
        let {activeTab, new: newPost, hot: hotPost, header, notice, ptr} = this.props.section;
        let isRefreshing, isLoadingMore, isFetching;
        if (activeTab === 0) {
            isRefreshing = ptr && newPost.isFetching;
            isLoadingMore = !ptr && newPost.isFetching;
            isFetching = newPost.isFetching;
        } else {
            isRefreshing = ptr && hotPost.isFetching;
            isLoadingMore = !ptr && hotPost.isFetching;
            isFetching = hotPost.isFetching;
        }

        let headerData = Immutable.fromJS([header]);
        let listData = Immutable.fromJS([{new: newPost.list, hot: hotPost.list}]);
        let noticeData = notice.open === 'Y' ? Immutable.fromJS([notice.list]) : List();

        return (
            <View style={styles.container}>
                <StatusBar
                    hidden={false}
                    barStyle={'light-content'}
                />
                <Section
                    header={headerData}
                    notice={noticeData}
                    noticeOpen={notice.open}
                    noticeDuration={notice.duration}
                    list={listData}
                    onPressBanner={this._onPressBanner}
                    onPressNotice={this._onPressNotice}
                    onPressPost={this._onPressPost}
                    onPressAvatar={this._onPressAvatar}
                    onPressSectionTag={this._onPressSectionTag}
                    onPressComment={this._onPressComment}
                    onPressLike={this._onPressLike}
                    onRefresh={this._onRefresh}
                    isFetching={isFetching}
                    ptr={ptr}
                    isRefreshing={isRefreshing}
                    isLoadingMore={isLoadingMore}
                    onEndReached={this._onEndReached}
                />
            </View>
        );
    }
}

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

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

});

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