'use strict'

import React, {Component} from 'react';
import ReactNative, {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    NativeModules,
    InteractionManager,
    NativeAppEventEmitter,
} from 'react-native'

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as brandActions from '../reducers/brand/brandActions';

import Brand from '../components/brand/Brand';


const actions = [
    brandActions,
];

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 BrandContainer extends Component {
    constructor(props) {
        super(props);

        this._onPressSlideItem = this._onPressSlideItem.bind(this);
        this._onPressFilter = this._onPressFilter.bind(this);
        this._onSelectChannel = this._onSelectChannel.bind(this);
        this._onPressSearch = this._onPressSearch.bind(this);
        this._onPressClearHistory = this._onPressClearHistory.bind(this);
        this._onClickCancelSearch = this._onClickCancelSearch.bind(this);
        this._onSearchTextChange = this._onSearchTextChange.bind(this);
        this._onPressKeyword = this._onPressKeyword.bind(this);
        this._onPressBrandSearchItem = this._onPressBrandSearchItem.bind(this);
        this._setBrandData = this._setBrandData.bind(this);
        this._setInitialListSize = this._setInitialListSize.bind(this);
        this._onPressBrandItem = this._onPressBrandItem.bind(this);
        this._onPressSearchHistoryItem = this._onPressSearchHistoryItem.bind(this);


        this.subscription = NativeAppEventEmitter.addListener(
            'ChannelDidChangeEvent',
            (reminder) => {
                this._onSelectChannel({id: reminder.channel});
            }
        );

    }

    componentDidMount() {
        this.props.actions.getBrandList(1);
        this.props.actions.getBrandResource(1);
        this.props.actions.searchHistory();
        this.props.actions.hotKeyword();
    }

    componentWillUnmount() {
        this.subscription && this.subscription.remove();
    }

    //原生跳转
    _onPressBrandItem(data){
        ReactNative.NativeModules.YH_CommonHelper.pushBrandVC(data);
    }

    //URL 拼装跳转规则跳转
    _onPressSlideItem(url) {
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

    _onPressFilter(value) {
        this.props.actions.setBrandFilter(value);
    }

    _setInitialListSize(count){
        this.props.actions.setInitialListSize(count);
    }

    _onSelectChannel(channel){
        let {
            brandListForBoy,
            brandListForGirl,
            brandListForKid,
            brandListForLifeStyle,
            reourceForBoy,
            reourceForGirl,
            reourceForKid,
            reourceForLifeStyle,
        } = this.props.brand;

        let channelId = channel.id;
        let brandListNeedRequest;
        let reourceNeedRequest;
        if (channelId == 1) {
            brandListNeedRequest = brandListForBoy.get('hasSuccess');
            reourceNeedRequest = reourceForBoy.get('hasSuccess');
        }else if (channelId == 2) {
            brandListNeedRequest = brandListForGirl.get('hasSuccess');
            reourceNeedRequest = reourceForGirl.get('hasSuccess');
        }else if (channelId == 3) {
            brandListNeedRequest = brandListForKid.get('hasSuccess');
            reourceNeedRequest = reourceForKid.get('hasSuccess');
        }else if (channelId == 4) {
            brandListNeedRequest = brandListForLifeStyle.get('hasSuccess');
            reourceNeedRequest = reourceForLifeStyle.get('hasSuccess');
        }

        if (!brandListNeedRequest) {
            this.props.actions.getBrandList(channelId);
        }
        if (!reourceNeedRequest) {
            this.props.actions.getBrandResource(channelId);
        }
        this.props.actions.setInitialListSize(0);
        this.props.actions.setBrandSelectedChannel(channelId);
    }

    _onPressSearch() {
        this.props.actions.setShowSearch(!this.props.brand.showSearch);
    }

    _onPressClearHistory() {
        this.props.actions.clearSearchHistory();
    }

    _onClickCancelSearch() {
        this.props.actions.setShowSearch(!this.props.brand.showSearch);
        this.props.actions.setBrandKeyword('');
        this.props.actions.filteBrandForKeyword('');
    }

    _onSearchTextChange(text) {
        this.props.actions.setBrandKeyword(text);
        this.props.actions.filteBrandForKeyword(text);
    }

    _setBrandData(data, selectedChannelId) {
        this.props.actions.setBrandData(data, selectedChannelId);
    }

    _onPressKeyword(keyword) {
        this._onSearchTextChange(keyword);
    }

    _onPressBrandSearchItem(data) {
        this._onPressBrandItem(data);
        this.props.actions.insertSearchHistory(data);
        this._onClickCancelSearch();
    }

    _onPressSearchHistoryItem(keyword, androiddata){
        //兼容IOS只需要搜索关键字，IOS设置搜索框内容为keyword即可，android需要点击直接跳转至相关页面
        if (Platform.OS === 'ios') {
            this._onSearchTextChange(keyword);
        }
        else{
            //先判断是否有androiddata数据，若有则直接调用原生方法，若无则可能是热门搜索信息，设置搜索框文字内容
            if(androiddata){
                this._onPressBrandItem(androiddata);
                this.props.actions.insertSearchHistory(androiddata);
            }
            else
                this._onSearchTextChange(keyword);
        }
    }

    render() {
        let {
            showSearch,
            initialListSize,
            isFetching,
            selectedChannelId,
            brandFliter,
            brandListForBoy,
            brandListForGirl,
            brandListForKid,
            brandListForLifeStyle,
            reourceForBoy,
            reourceForGirl,
            reourceForKid,
            reourceForLifeStyle,
            search,
        } = this.props.brand;

        return (
            <View style={styles.container}>
                <Brand
                    isFetching={isFetching}
                    initialListSize={initialListSize}
                    selectedChannelId= {selectedChannelId}
                    brandFliter= {brandFliter}
                    brandListForBoy= {brandListForBoy}
                    brandListForGirl= {brandListForGirl}
                    brandListForKid= {brandListForKid}
                    brandListForLifeStyle= {brandListForLifeStyle}
                    reourceForBoy= {reourceForBoy}
                    reourceForGirl={reourceForGirl}
                    reourceForKid={reourceForKid}
                    reourceForLifeStyle={reourceForLifeStyle}
                    onPressFilter= {this._onPressFilter}
                    onPressSlideItem= {this._onPressSlideItem}
                    onSelectChannel={this._onSelectChannel}
                    showSearch={showSearch}
                    search={search}
                    onPressSearch={this._onPressSearch}
                    onPressClearHistory={this._onPressClearHistory}
                    onClickCancel={this._onClickCancelSearch}
                    onTextChange={this._onSearchTextChange}
                    onPressBrandSearchItem={this._onPressBrandSearchItem}
                    setBrandData={this._setBrandData}
                    setInitialListSize={this._setInitialListSize}
                    onPressBrandItem={this._onPressBrandItem}
                    onPressSearchHistoryItem={this._onPressSearchHistoryItem}
                />
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },

});

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