'use strict'

import React, {Component} from 'react';
import {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    Image,
    ListView,
    TouchableOpacity,
} from 'react-native';

import {Map} from 'immutable';
import BrandHeader from './BrandHeader';
import YH_SearchBar from '../../../common/components/YH_SearchBar';
import ChannelSelector from '../../../common/components/ChannelSelector';
import AllBrandListCell from './AllBrandListCell';
import NewHotBannerListCell from './NewHotBannerListCell';
import BrandSearch from './search/BrandSearch';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import IndexListView from './IndexListView';
import {ScrollCount} from '../../utils/Utils';
import NoNetworkTip from '../../../common/components/NoNetworkTip';
import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';

export default class Brand extends Component {
    constructor(props) {
        super(props);

        this.renderSectionHeader = this.renderSectionHeader.bind(this);
        this.renderRow = this.renderRow.bind(this);
        this.renderHeader = this.renderHeader.bind(this);
        this.scrollToSection = this.scrollToSection.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
        this.listView = null;
        this.sectionData = Map();
        this.sectionDataKey = Map();
        this.needScrollSection = 0;
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.selectedChannelId != nextProps.selectedChannelId) {
            this.listView && this.listView.scrollTo({x: 0, y: 0, animated: false});
        }
    }

    scrollToSection(index,sectionID){
        let item = this.sectionDataKey[sectionID];
        if (item) {
           if (!item.y) {
               this.needScrollSection = sectionID;
               item.count = ScrollCount(sectionID,this.sectionData);
               this.props.setInitialListSize && this.props.setInitialListSize(item.count);
               this.props.setBrandData && this.props.setBrandData(this.sectionDataKey, this.props.selectedChannelId);
           } else {
               this.listView && this.listView.scrollTo({x: 0, y: item.y, animated: false});
           }
        }
    }

    onLayout(sectionID, e) {
        let {y} = e.nativeEvent.layout;
        if (this.sectionDataKey && this.sectionDataKey[sectionID].y != y) {
            this.sectionDataKey[sectionID].y = y;
            this.props.setBrandData && this.props.setBrandData(this.sectionDataKey, this.props.selectedChannelId);
            if (this.needScrollSection == sectionID) {
               this.listView && this.listView.scrollTo({x: 0, y, animated: false});
            }
        }
    }

    renderHeader() {
        return (
            <View style={styles.header}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                        this.props.onPressSearch && this.props.onPressSearch();
                    }}
                >
                    <YH_SearchBar
                        ref={(c) => {
                            this.searchBar = c;
                        }}
                        placeholder={"搜索品牌"}
                        editable={false}
                    />
                </TouchableOpacity>

                <BrandHeader
                    selectedChannelId={this.props.selectedChannelId}
                    reourceForBoy={this.props.reourceForBoy}
                    reourceForGirl={this.props.reourceForGirl}
                    reourceForKid={this.props.reourceForKid}
                    reourceForLifeStyle={this.props.reourceForLifeStyle}
                    onPressSlideItem={this.props.onPressSlideItem}
                    onPressRecommendItem={this.props.onPressRecommendItem}
                    onPressFilter={this.props.onPressFilter}
                    brandFliter={this.props.brandFliter}
                    abversion={this.props.abversion}
                />
            </View>
        );
    }

    renderSectionHeader(sectionData, sectionID) {
        let title = sectionID == '0-9' ? '0' : sectionID;
        return (
            <View style={styles.sessionTitle} onLayout={this.onLayout.bind(this, sectionID)}>
                <Text style={styles.sessionText}>{title}</Text>
            </View>
        );
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {

        let pageName = 'iFP_Brand';
        if (Platform.OS === 'android') {
            pageName = 'aFP_Brand';
        }
        let tabName = '';
        let selectedChannelId = this.props.selectedChannelId;
        if (selectedChannelId == 1) {
            tabName = 'boy';
        } else if (selectedChannelId == 2) {
            tabName = 'girl';
        } else if (selectedChannelId == 3) {
            tabName = 'kid';
        } else if (selectedChannelId == 4) {
            tabName = 'lifeStyle';
        }
        let l2_TAB_NAME = '';
        if (this.props.brandFliter == 0) {
            l2_TAB_NAME = '全部品牌';
        }else if (this.props.brandFliter == 1) {
            l2_TAB_NAME = '新入驻品牌';
        }else if (this.props.brandFliter == 2) {
            l2_TAB_NAME = '热门品牌';
        }

        let params = {
            P_NAME : pageName,
            TAB_ID : selectedChannelId,
            TAB_NAME : tabName,
            L2_TAB_ID : this.props.brandFliter,
            L2_TAB_NAM : l2_TAB_NAME,
            I_INDEX: parseInt(rowID)+1+'',
            exposureEnd : 1,
        };
        if (this.props.brandFliter == 0) {
            return (
                <AllBrandListCell yh_exposureData={params} rowData={rowData} onPressBrandItem={this.props.onPressBrandItem}/>
            );
        } else {
            return (
                <NewHotBannerListCell yh_exposureData={params} rowData={rowData} onPressBrandItem={this.props.onPressBrandItem}/>
            );
        }
    }

    render() {

        let {
            showSearch,
            isFetching,
            listError,
            reourceFetching,
            reourceError,
            brandFliter,
            selectedChannelId,
            brandListForBoy,
            brandListForGirl,
            brandListForKid,
            brandListForLifeStyle,
            reourceForBoy,
            reourceForGirl,
            reourceForKid,
            reourceForLifeStyle,
            initialListSize,
            search,
        } = this.props;

        let data = brandListForBoy;
        let reource = reourceForBoy;

        if (selectedChannelId == 1) {
            data = brandListForBoy;
            reource = reourceForBoy;
        } else if (selectedChannelId == 2) {
            data = brandListForGirl;
            reource = reourceForGirl;
        } else if (selectedChannelId == 3) {
            data = brandListForKid;
            reource = reourceForKid;
        } else if (selectedChannelId == 4) {
            data = brandListForLifeStyle;
            reource = reourceForLifeStyle;
        }

        let showLoading = (reourceFetching && reource.get('banner').size == 0 && reource.get('custom_brands').size == 0  && reourceError == null);

        if (showLoading) {
            return (
                <View style={styles.container}>
                    <ChannelSelector selectedChannelId={selectedChannelId} onSelectChannel={this.props.onSelectChannel}/>
                    <LoadingIndicator
                        isVisible={showLoading}
                    />
                </View>
            );
        } else if (listError && data.get('all_list').size == 0 && reource.get('banner').size == 0 && reource.get('custom_brands').size == 0) {
            return (
                <View style={styles.container}>
                    <ChannelSelector selectedChannelId={selectedChannelId} onSelectChannel={this.props.onSelectChannel}/>
                    <NoNetworkTip
                        onPressReload={this.props.onRefresh}
                    />
                </View>
            );
        }


        let list;
        let listDataSource;
        let contentContainerStyle;
        let renderSectionHeader = null;
        let showIndexForListView = false;
        let showsVerticalScrollIndicator = false;

        if (brandFliter == 0) {
            list = data ? data.get('all_list') : null;
            let newList = {};
            list && list.map((value, key) => {
                newList[key] = value.toArray();
            });
            listDataSource =  newList ? this.dataSource.cloneWithRowsAndSections(newList) : null;

            contentContainerStyle = styles.contentContainerOne;
            renderSectionHeader = this.renderSectionHeader;

            showIndexForListView = true;
            this.sectionData = newList;
            this.sectionDataKey = data.get('all_list_key').toJS();
        } else if (brandFliter == 1) {
            list = data ? data.get('new_list') : null;
            listDataSource =  list ? this.dataSource.cloneWithRows(list.toArray()) : null;
            contentContainerStyle = styles.contentContainerTwo;
            showsVerticalScrollIndicator = true;
        } else if (brandFliter == 2) {
            list = data ? data.get('hot_list') : null;
            listDataSource =  list ? this.dataSource.cloneWithRows(list.toArray()) : null;
            contentContainerStyle = styles.contentContainerTwo;
            showsVerticalScrollIndicator = true;
        }

        if (!list) {
            return null;
        }

        let isPullToRefresh = isFetching && reourceFetching;

        return (
            <View style={styles.container}>
                <ChannelSelector selectedChannelId={selectedChannelId} onSelectChannel={this.props.onSelectChannel}/>

                {
                    Platform.OS === 'ios' ?
                        <ListView
                            ref={(ref)=>this.listView=ref}
                            initialListSize={initialListSize}
                            contentContainerStyle={contentContainerStyle}
                            pageSize={100}
                            enableEmptySections={true}
                            removeClippedSubviews={true}
                            dataSource={listDataSource}
                            renderRow={this.renderRow}
                            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
                            renderSectionHeader={renderSectionHeader}
                            renderHeader={this.renderHeader}
                            enablePullToRefresh={true}
                            isOnPullToRefresh={isPullToRefresh}
                            yh_viewVisible={true}
                            onFinishRefreshData={() => {
                                this.listView && this.listView.yh_updateVisibleSubViews && this.listView.yh_updateVisibleSubViews();//ios 专用
                            }}//ios 专用
                            onRefreshData={() => {
                                this.props.onRefresh && this.props.onRefresh();
                            }}
                        />
                    :
                        <ListView
                            ref={(ref)=>this.listView=ref}
                            yh_viewVisible={true}
                            initialListSize={initialListSize}
                            contentContainerStyle={contentContainerStyle}
                            enableEmptySections={true}
                            dataSource={listDataSource}
                            renderRow={this.renderRow}
                            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
                            renderSectionHeader={renderSectionHeader}
                            renderHeader={this.renderHeader}
                            enablePullToRefresh={true}
                            isOnPullToRefresh={isPullToRefresh}
                            refreshControl={
                                <YH_PtrRefresh
                                    refreshing={isPullToRefresh}
                                    onRefresh={() => {
                                        this.props.onRefresh && this.props.onRefresh();
                                    }}
                                />
                            }
                        />
                }

                {showIndexForListView ? <IndexListView dataSource={list.keySeq().toArray()} onLetterPress={this.scrollToSection}/> : null}

                {showSearch ? <BrandSearch
                    data={search}
                    onTextChange={this.props.onTextChange}
                    onClickCancel={this.props.onClickCancel}
                    onPressClearHistory={this.props.onPressClearHistory}
                    onPressBrandSearchItem={this.props.onPressBrandSearchItem}
                    onPressSearchHistoryItem={this.props.onPressSearchHistoryItem} /> : null}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainerOne: {

    },
    contentContainerTwo: {
		flexDirection: 'row',
        flexWrap: 'wrap',
		alignItems:'flex-start',
	},
    header: {
        width,
        backgroundColor: '#CCC'
    },
	sessionText: {
		textAlign: 'left',
		fontSize: 14,
		marginLeft:8,
		color: '#999999',
    },
	sessionTitle: {
		justifyContent: 'center',
		height: 20,
		width,
		backgroundColor: '#e5e5e5',
    },
});