'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    ScrollView,
    Text,
    NativeAppEventEmitter,
    StyleSheet,
    ListView,
    Dimensions,
    TouchableOpacity,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import LatterListView from './LatterListView';
import YH_SearchBar from '../../../common/components/YH_SearchBar';


export default class ProvinceSchoolView extends Component {

    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.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._onTextChange  = this._onTextChange.bind(this);
        this.listView = null;
        this.dataList = [];
        this.latterList = [];
        this.dataListShow = [];
        this.latterListShow = [];
    }

    componentDidMount() {

    }

    _onTextChange(text){
        let newDataList = [];
        let curViewType = this.props.resource.get('type');
        let searchResultPageInfo = {
			show: false,
			type: {curViewType},
			leftList: [],
			rightList: [],
		};
        console.log(this.dataList);
        console.log('this.dataList');
        if (text != '') {
            this.dataList.forEach((dataListItem, i) => {
                let latter = this.latterList[i];
                let list = dataListItem[latter].list;
                let newDataListItem = {};
                let newList = [];

                list.forEach((listItem, i) => {
                    let name = curViewType=='school' ? listItem.schoolName:listItem.addresseeName;
                    if (name.indexOf(text) != -1) {
                        newList.push(listItem);
                    }
            	});
                if (newList.length) {
                    newDataListItem[latter]={list:newList,count:0,separatorCount:0};
                    newDataList.push(newDataListItem);
                }
        	});
            console.log('====0000');
            console.log(newDataList);
            if (newDataList.length) {
                searchResultPageInfo.show = true;
                searchResultPageInfo.leftList = newDataList;
            }
        }

        this.props.updateSearchResultPageInfo && this.props.updateSearchResultPageInfo(searchResultPageInfo);
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        let separatorLatter='';
        let latterObject = this.dataListShow[rowID];
        for (var key in latterObject) {
            if (latterObject.hasOwnProperty(key)) {
                separatorLatter = key;
            }
        }
        let rowDataList = rowData[separatorLatter].list;
        let rowDataListImmulate = Immutable.fromJS(rowDataList);
        let curViewType = this.props.resource.get('type');
        return (
            <View>
                <View key={'sep' + rowID} style={styles.provinceLatterCell}>
                    <Text>
                        {separatorLatter}
                    </Text>
                </View>
                {rowDataListImmulate.map((provinceItem, i) => {
                    return (
                        <TouchableOpacity activeOpacity={1.0} onPress={() => {
                            this._onTextChange('');
                            switch (this.props.resource.get('type')) {
                                case 'province':
                                    this.props.hideProvinceSelectView && this.props.hideProvinceSelectView(provinceItem);
                                    break;
                                case 'school':
                                    this.props.hideSchoolSelectView && this.props.hideSchoolSelectView(provinceItem);
                                    break;
                                default:

                            }
                        }}>
                            <View style={styles.provinceCell}>
                                <Text style={{marginLeft: 15}}>
                                    {curViewType == 'province' ?
                                        provinceItem.get('addresseeName')
                                        :provinceItem.get('schoolName')
                                    }

                                </Text>
                            </View>
                            {i !== (rowDataListImmulate.size -1) ?
                                <View style={styles.provinceSeparatorLine}>
                                </View>
                                :null
                            }
                        </TouchableOpacity>


                    );
                })}

            </View>
        );
    }
    _scrollToSection(index,sectionID){
        console.log(index);
        console.log(sectionID);
        console.log('-------qqqq');
        let {resource} = this.props;
        let leftList = resource.get('leftList');
        let rightList = resource.get('rightList');

        rightList = rightList.toArray();

        let item = this.dataListShow[index];
        if (item) {
            let distanceY = 30 * index + item[sectionID].count * 40 + item[sectionID].separatorCount * 1.5;
            this.listView.scrollTo({x: 0, y: distanceY, animated: false});
        }
    }

    render() {
        let {resource,searchResultPageInfo} = this.props;
        let leftList = resource.get('leftList');
        let rightList = resource.get('rightList');
        let searchPlaceHolder = this.props.resource.get('type') == 'school' ? '搜索学校' : '搜索省份';
        this.dataList = (leftList && leftList.size) ? leftList.toJS() : [];
        this.latterList = rightList.toArray();
        this.dataListShow = this.dataList;
        this.latterListShow = this.latterList;
        if (searchResultPageInfo.get('show')) {
            leftList = searchResultPageInfo.get('leftList');
            rightList = searchResultPageInfo.get('rightList');
            this.dataListShow = (leftList && leftList.size) ? leftList.toJS() : [];
            this.latterListShow = rightList.toArray();
        }
        return (
            <View style={styles.container}>
                <View style={styles.listViewContainer}>
                    <ListView
                        ref={(ref)=>this.listView=ref}
                        contentContainerStyle={[styles.contentContainerStyle]}
                        enableEmptySections={true}
                        dataSource={this.dataSource.cloneWithRows(this.dataListShow)}
                        renderRow={this._renderRow}
                        showsHorizontalScrollIndicator={false}
                    />
                    <LatterListView
                        style={{height: height - 64 - 200}}
                        dataSource={this.latterListShow}
                        distanceToContainer={200}
                        onLetterPress={this._scrollToSection}/>
                </View>
                <View style={styles.header}>
                    <YH_SearchBar
                        ref={(c) => {
                            this.searchBar = c;
                        }}
                        placeholder={searchPlaceHolder}
                        onClickCancel={this._onTextChange}
                        onTextChange={this._onTextChange}
                    />
                </View>
                <TouchableOpacity activeOpacity={1.0} onPress={() => {
                    console.log('--close');
                    switch (this.props.resource.get('type')) {
                        case 'province':{
                            this.props.hideProvinceSelectView && this.props.hideProvinceSelectView();
                        }
                            break;
                        case 'school':{
                            this.props.hideSchoolSelectView && this.props.hideSchoolSelectView();
                        }
                            break;
                        default:
                    }
                }}>
                    <View style={styles.closeContainer}>
                         <Text style={styles.closeText}>
                            close
                         </Text>
                    </View>
                </TouchableOpacity>


            </View>
        );
    }
}
let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        width: width,
        height:height - 64,
        backgroundColor: 'rgba(0,0,0,0.3)',
        flexDirection: 'column-reverse',
        flex: 1,
    },
    closeContainer: {
        height: 40,
        flexDirection: 'row-reverse',
    },
    closeText: {
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 10,
        color: '#dfe3e2',
    },
    listViewContainer: {
        height: height - 64 - 200,
        backgroundColor: 'white',
    },
    contentContainerStyle: {
        width: width - 20,
        backgroundColor: '#dfe3e2',
    },
    contentContainer: {
        flexDirection: 'column',
        backgroundColor:'white',
    },
    provinceLatterCell: {
        marginLeft: 15,
        height: 30,
        backgroundColor: '#dfe3e2',
        justifyContent: 'center',
    },

    row: {
        backgroundColor: 'white',
        height: 30,
    },
    header: {
        justifyContent: 'center',
        backgroundColor: 'white',
        height: 40,
    },
    provinceCell: {
        justifyContent: 'center',
        height: 40,
        backgroundColor: 'white',
    },
    provinceSeparatorLine: {
        height: 1.5,
        backgroundColor: '#dfe3e2',
        marginLeft: 15,
    }
});