'use strict'

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

import {Map} from 'immutable';
import BrandSwiper from './BrandSwiper';
import BannerReourceList from './BannerReourceList';
import BrandFliter from './BrandFliter';
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 {ScrollToIndex} 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.scrollData = [];
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }


    componentDidMount() {

    }

    componentWillUnmount() {

    }

    scrollToSection(sessionID){
        let newSrc = ScrollToIndex(sessionID,this.scrollData);
        this.listView.scrollTo({x: 0, y:443+newSrc , animated: false});
    }

    renderHeader(){
        let data = this.props.reourceForBoy;
        let brandFliter = this.props.brandFliter;
        let channelFliter = this.props.channelFliter;

        if (channelFliter == 0) {
            data = this.props.reourceForBoy;
        } else if (channelFliter == 1) {
            data = this.props.reourceForGirl;
        } else if (channelFliter == 2) {
            data = this.props.reourceForKid;
        } else if (channelFliter == 3) {
            data = this.props.reourceForLifeStyle;
        }

		let banner = data.get('banner');
        let custom_brands = data.get('custom_brands');
        let brandsText = data.get('brandsText');

        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>
                {banner?<BrandSwiper resource={banner} onPressSlideItem={this.props.onPressSlideItem}/>:null}
                {custom_brands?<BannerReourceList resource={custom_brands} onPressSlideItem={this.props.onPressSlideItem}/>:null}
                {brandsText?<BrandFliter dataSource={brandsText} selectID={brandFliter} onPressFilter={this.props.onPressFilter}/>:null}
            </View>
        );
    }

    renderSectionHeader(sectionData, sectionID) {
        let title = sectionID;
        if (sectionID == '0-9') {
            title = '0';
        }
        return (
            <View style={styles.sessionTitle}>
                <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,
            channelFliter,
            brandListForBoy,
            brandListForGirl,
            brandListForKid,
            brandListForLifeStyle,
            reourceForBoy,
            reourceForGirl,
            reourceForKid,
            reourceForLifeStyle,
            search,
        } = this.props;

        let data;

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

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

        if (brandFliter == 0) {
            list = data?data.all_list:null;
            listDataSource =  list?this.dataSource.cloneWithRowsAndSections(list):null;
            contentContainerStyle = styles.contentContainerOne;
            renderSectionHeader = this.renderSectionHeader;
            showIndexForListView = true;
        } 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;
        }
        this.scrollData = list;

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

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

                {showIndexForListView?<IndexListView dataSource={list} onLetterPress={this.scrollToSection}/>: null}
                {showSearch ? <BrandSearch style={styles.search} data={search}/> : 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 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: 12,
		marginLeft:8,
		color: '#999999',
    },
	sessionTitle: {
		justifyContent: 'center',
		height: 20,
		width,
		backgroundColor: '#e5e5e5',
    },
    search: {
    },
});