'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 BLKChannelSelector from './BLKChannelSelector';
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 BLKBrandCell from './BLKBrandCell'

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

        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.y = ScrollCount(sectionID,this.sectionData);
               this.props.setBrandData && this.props.setBrandData(this.sectionDataKey, this.props.selectedChannelId);
               this.listView && this.listView.scrollTo({x: 0, y: item.y, animated: false});
           } 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);
        }
    }

    renderHeader() {
        return (
            <View style={styles.header}>
                <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>
        );
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        let title = sectionID == '0-9' ? '0' : sectionID;
        // console.log(sectionID);
        // console.log(rowData);
        // if (sectionID == '0-9') {
        //     console.log('should appears!!!!!!!!!!!!!!');
        // }
        return (
            <View  onLayout={this.onLayout.bind(this, sectionID)}>
                <BLKBrandCell title={title} rowData={rowData} onPressBrandItem={this.props.onPressBrandItem}/>
            </View>
        );
    }

    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 contentContainerStyle;
        let showsVerticalScrollIndicator = false;

        list = data ? data.get('all_list') : null;
        let newList = {};
        let keyList = list? list.keySeq().toArray().sort():[];
        for (var i = 0; i < keyList.length; i++) {
            let key = keyList[i];
            // console.log(list.get(key).toArray());
            let item = list.get(key).toArray();
            if (item.length) {
                newList[key] = [list.get(key).toArray()];
            }
        }

        // console.log(newList);
        // console.log('aaaaa');
        // console.log(data?data.toJS():'null');
        contentContainerStyle = styles.contentContainerOne;

        this.sectionData = newList;
        this.sectionDataKey = data.get('all_list_key').toJS();

        if (!list) {
            return null;
        }

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

                <ListView
                    ref={(ref)=>this.listView=ref}
                    initialListSize={1000}
                    contentContainerStyle={contentContainerStyle}
                    enableEmptySections={false}
                    dataSource={this.dataSource.cloneWithRowsAndSections(newList)}
                    renderRow={this.renderRow}
                    showsVerticalScrollIndicator={showsVerticalScrollIndicator}
                    renderHeader={this.renderHeader}
                />
                <IndexListView dataSource={list.keySeq().toArray().sort()} onLetterPress={this.scrollToSection}/>
                <LoadingIndicator
                    isVisible={isFetching}
                />
            </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',
    },
});