'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';


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

import User from '../components/user/User';
import {Actions} from 'react-native-router-flux';

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

const {
    StatusBar,
    ScrollView,
    View,
    StyleSheet,
    Dimensions,
    Platform,
    ActionSheetIOS,
    NativeModules,
    InteractionManager,
    NativeAppEventEmitter,
} = ReactNative;
let YH_CommunityAssetsPicker = NativeModules.YH_CommunityAssetsPicker;

let PickerType = {
    Avatar: 0,
    Bg: 1,
}

let SourceType = {
    UIImagePickerControllerSourceTypePhotoLibrary: 0,
    UIImagePickerControllerSourceTypeCamera: 1,
}

const actions = [
    userActions,
    homeActions,
    appActions,
];

function mapStateToProps(state) {
    return {
        ...state
    };
}

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

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

class UserContainer extends React.Component {
    constructor(props) {
        super(props);

        this._onPressUserAvatar = this._onPressUserAvatar.bind(this);
        this._onPressGotoSettingState = this._onPressGotoSettingState.bind(this);
        this._onPressAvatar = this._onPressAvatar.bind(this);
        this._onPressComment = this._onPressComment.bind(this);
        this._onPressLike = this._onPressLike.bind(this);
        this._onRefresh = this._onRefresh.bind(this);
        this._onPressPost = this._onPressPost.bind(this);
        this._onEndReached = this._onEndReached.bind(this);
        this._rightButtonClick = this._rightButtonClick.bind(this);
        this._onPressSectionTag = this._onPressSectionTag.bind(this);
        this._onPressBackgroundImg = this._onPressBackgroundImg.bind(this);
    }

    componentDidMount() {
        this.observer = NativeAppEventEmitter.addListener('UserImagePickerEvent',(event)=>{
            switch (event.pickerType) {
                case PickerType.Avatar:
                    this.props.actions.uploadAvatar(event.assetURL);
                    break;
                case PickerType.Bg:
                    this.props.actions.uploadBg(event.assetURL);
                    break;
                default:

            }
        });

        this.avatarUploadObserver = NativeAppEventEmitter.addListener('EventGetAvatarURL', (event) => {
            let avatarURL = event.url;
            console.log('avatarURL ========== >' + avatarURL);
            this.props.actions.newAvatar(avatarURL);
        });

        this.backgroundUploadObserver = NativeAppEventEmitter.addListener('EventGetBackgroundURL', (event) => {
            let bgURL = event.url;
            console.log('bgURL ========== >' + bgURL);
            this.props.actions.newBackground(bgURL);
        });

    }

    componentWillUnmount() {
        this.props.actions.userClean();
        this.observer && this.observer.remove();
        this.avatarUploadObserver && this.avatarUploadObserver.remove();
        this.backgroundUploadObserver && this.backgroundUploadObserver.remove();
    }

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

    _onPressComment(id) {
        console.log('comment');
        this.props.actions.goToPost(id);
    }

    _onPressLike(post) {
        console.log('like');
        this.props.actions.likeOperation(post);
    }

    _onPressReply(id) {
        console.log('reply=======');
    }

    _onPressPost(id) {
        console.log('posts id =' + id);
        this.props.actions.goToPost(id);
    }

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

    _onPressUserAvatar() {

        const BUTTONS = ['拍照', '从相册选择', '编辑个人资料', '取消'];
        ActionSheetIOS.showActionSheetWithOptions({
            options: BUTTONS,
            cancelButtonIndex: 3,
        },

        (buttonIndex) => {
            this._onPressGotoSettingState(buttonIndex);
        });


    }

    _onPressGotoSettingState(buttonIndex) {
        console.log('go to setting state');
        switch (buttonIndex) {
            case 0:
            {
                console.log('拍照');
                YH_CommunityAssetsPicker.userImagePicker(PickerType.Avatar,SourceType.UIImagePickerControllerSourceTypeCamera, this.props.user.profile.uid + '');
            }
            break;
            case 1:
            {
                console.log('从相册中选择');
                YH_CommunityAssetsPicker.userImagePicker(PickerType.Avatar,SourceType.UIImagePickerControllerSourceTypePhotoLibrary, this.props.user.profile.uid+'');
            }
            break;
            case 2:
            {
                console.log('编辑个人资料');
                this.props.actions.goToSetting();
            }
            break;
            default:
        }
    }

    _onPressBackgroundImg() {
        const BUTTONS = ['拍照', '从相册选择', '取消'];
        ActionSheetIOS.showActionSheetWithOptions({
            options: BUTTONS,
            cancelButtonIndex: 2,
        },
        (buttonIndex) => {
            switch (buttonIndex) {
                case 0:
                {
                    console.log('拍照');
                    YH_CommunityAssetsPicker.userImagePicker(PickerType.Bg,SourceType.UIImagePickerControllerSourceTypeCamera, this.props.user.profile.uid+'');
                }
                break;
                case 1:
                {
                    console.log('从相册中选择');
                    YH_CommunityAssetsPicker.userImagePicker(PickerType.Bg,SourceType.UIImagePickerControllerSourceTypePhotoLibrary,this.props.user.profile.uid+'');
                }
                break;
                default:
            }
        });
    }

    _onRefresh() {
        InteractionManager.runAfterInteractions(() => {
            this.props.actions.posts(true);
            this.props.actions.like(true);
            this.props.actions.reply(true);
            this.props.actions.unread();
        });
    }

    _onEndReached(page) {
        InteractionManager.runAfterInteractions(() => {
            this.props.actions.setActiveTab(page);
            if (page === 0) {
                this.props.actions.posts(false);
            } else if (page === 1) {
                this.props.actions.like(false);
            } else if (page === 2) {
                this.props.actions.reply(false);
            }
        });
    }

    _rightButtonClick() {
        this.props.actions.goToMessageCenter();
    }

    render() {

        let {profile, activeTab, isFetching, ptr, posts: postsData, like: likeData, reply: replyData} = this.props.user;
        let listData = Immutable.fromJS([{posts: postsData.list, like: likeData.list, reply: replyData.list}]);
        let isRefreshing = ptr;
        let userInfo = Immutable.fromJS([profile]);
        let isLoadingMore, endReached;
        let endReachedText = '暂无更多';

        if (activeTab === 0) {
            isLoadingMore = !ptr && postsData.isFetching;
            isFetching = postsData.isFetching;
            endReached = postsData.endReached;
            if (postsData.list.size == 0) {
                endReachedText = '你还没有发布的帖子';
            }
        } else if (activeTab === 1) {
            isLoadingMore = !ptr && likeData.isFetching;
            isFetching = likeData.isFetching;
            endReached = likeData.endReached;
            if (likeData.list.size == 0) {
                endReachedText = '你还没有赞过的帖子';
            }
        } else if (activeTab === 2) {
            isLoadingMore = !ptr && replyData.isFetching;
            isFetching = replyData.isFetching;
            endReached = replyData.endReached;
            if (replyData.list.size == 0) {
                endReachedText = '你还没有回复过的帖子';
            }
        }

        return (
            <View style={styles.container}>
                <User
                    channel={this.props.app.channel}
                    userInfo={userInfo}
                    profile={profile}
                    list={listData}
                    onPressAvatar={this._onPressAvatar}
                    onPressComment={this._onPressComment}
                    onPressLike={this._onPressLike}
                    onPressReply={this._onPressReply}
                    onPressPost={this._onPressPost}
                    onPressSectionTag={this._onPressSectionTag}
                    onPressUserAvatar={this._onPressUserAvatar}
                    onPressBackgroundImg={this._onPressBackgroundImg}
                    onRefresh={this._onRefresh}
                    isFetching={isFetching}
                    ptr={ptr}
                    endReached={endReached}
                    isRefreshing={isRefreshing}
                    isLoadingMore={isLoadingMore}
                    onEndReached={this._onEndReached}
                    onChangeTab={this._onChangeTab}
                    rightButtonClick={this._rightButtonClick}
                    endReachedText={endReachedText}
                    activeTab={activeTab}
                />
            </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'
    },

});

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