'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';

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.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.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.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) {
        if (this.props.brandFliter == 0) {
            return (
                <AllBrandListCell rowData={rowData} onPressBrandItem={this.props.onPressBrandItem}/>
            );
        } else {
            return (
                <NewHotBannerListCell rowData={rowData} onPressBrandItem={this.props.onPressBrandItem}/>
            );
        }
    }

    render() {

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

        let data;

        if (selectedChannelId == 1) {
            data = brandListForBoy;
        } else if (selectedChannelId == 2) {
            data = brandListForGirl;
        } else if (selectedChannelId == 3) {
            data = brandListForKid;
        } else if (selectedChannelId == 4) {
            data = brandListForLifeStyle;
        }

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

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

                <ListView
                    ref={(ref)=>this.listView=ref}
                    initialListSize={initialListSize}
                    contentContainerStyle={contentContainerStyle}
                    enableEmptySections={true}
                    dataSource={listDataSource}
                    renderRow={this.renderRow}
                    showsVerticalScrollIndicator={showsVerticalScrollIndicator}
                    renderSectionHeader={renderSectionHeader}
                    renderHeader={this.renderHeader}
                />

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

                <LoadingIndicator
                    isVisible={isFetching}
                />

                {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',
    },
});