'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 ChannelFliter from './ChannelFliter';
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();
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }

    componentWillReceiveProps(nextProps) {
        if (this.props.brandChannelFliter != nextProps.brandChannelFliter) {
            this.listView.scrollTo({x: 0, y: 0, animated: false});
        }
    }
    scrollToSection(index,sectionID){
        let item = this.sectionDataKey[sectionID];
        if (item) {
           if (!item.y) {
               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.brandChannelFliter);
           } 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.brandChannelFliter);
            if (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;
                        }}
                        editable={false}
                    />
                </TouchableOpacity>

                <BrandHeader
                    brandChannelFliter= {this.props.brandChannelFliter}
                    reourceForBoy= {this.props.reourceForBoy}
                    reourceForGirl={this.props.reourceForGirl}
                    reourceForKid={this.props.reourceForKid}
                    reourceForLifeStyle={this.props.reourceForLifeStyle}
                    onPressSlideItem= {this.props.onPressSlideItem}
                    onPressFilter= {this.props.onPressFilter}
                    brandFliter={this.props.brandFliter}
                />

            </View>
        );
    }

    renderSectionHeader(sectionData, sectionID) {
        let title = sectionID;
        if (sectionID == '0-9') {
            title = '0';
        }
        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} onPressSlideItem={this.props.onPressSlideItem}/>
            );
        }else {
            return (
                <NewHotBannerListCell rowData={rowData} onPressSlideItem={this.props.onPressSlideItem}/>
            );
        }
    }

    render() {

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

        let data;

        if (brandChannelFliter == 1) {
            data = brandListForBoy?brandListForBoy.toJS():null;
        } else if (brandChannelFliter == 2) {
            data = brandListForGirl?brandListForGirl.toJS():null;
        } else if (brandChannelFliter == 3) {
            data = brandListForKid?brandListForKid.toJS():null;
        } else if (brandChannelFliter == 4) {
            data = brandListForLifeStyle?brandListForLifeStyle.toJS():null;
        }

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

        if (brandFliter == 0) {
            list = data?data.all_list:null;
            keys = data?data.all_list_key:null;
            listDataSource =  list?this.dataSource.cloneWithRowsAndSections(list):null;
            contentContainerStyle = styles.contentContainerOne;
            renderSectionHeader = this.renderSectionHeader;
            showIndexForListView = true;
            this.sectionData = list;
            this.sectionDataKey = keys;
        } else if (brandFliter == 1) {
            list = data?data.new_list:null;
            listDataSource =  list?this.dataSource.cloneWithRows(list):null;
            contentContainerStyle = styles.contentContainerTwo;
        } else if (brandFliter == 2) {
            list = data?data.hot_list:null;
            listDataSource =  list?this.dataSource.cloneWithRows(list):null;
            contentContainerStyle = styles.contentContainerTwo;
        }

        if (!list) {
            return null;
        }

        return (
            <View style={styles.container}>
                <ChannelFliter selectID={brandChannelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/>

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

                {showIndexForListView?<IndexListView dataSource={Object.keys(list)} 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} /> : null}
            </View>
        );
    }
}

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

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