'use strict';

import React, {Component} from 'react';
import ScreenSubCell from '../cell/ScreenSubCell';
import Immutable, {Map} from 'immutable';
import IndexListView from './IndexListView'
import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Platform,
} from 'react-native';


export default class ScreenSub extends Component {

    constructor(props) {
        super(props);
        this.scrollToSection = this.scrollToSection.bind(this);
        this.renderRow = this.renderRow.bind(this);
        this.renderSectionHeader = this.renderSectionHeader.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });

    }

    scrollToSection(index,sectionID){
        let {resource} = this.props;

        let obj = resource&&resource.get('filterSub')?resource.get('filterSub'):null;
        let key = obj?obj.get('key'):null;
        let list = obj?obj.get('list'):null;
        let keyLists = obj?obj.get('keyList'):null;
        let specialList = obj?obj.get('specialList'):null;

        if (key == 'brand') {
            let dataSourceList =  list?list.toJS():{};
            let keyList = keyLists?keyLists.toJS():[];
            let object = specialList?specialList.toJS():[];
            if (object && object.length>0) {
                keyList.unshift('#');
            }
            let y = 30 + 40;
            for (var i = 0; i < keyList.length; i++) {
                if (sectionID == keyList[i]) {
                    break;
                }
                let count = 0;
                if (keyList[i] == '#') {
                    count = object.length;
                }else {
                    count = dataSourceList[keyList[i]].length;
                }
                y = y + 30 + 40 * count;
            }
            this.refs.brandList && this.refs.brandList.scrollTo({x: 0, y: y, animated: false});
        }
    }

    renderSectionHeader(sectionData, sectionID) {
        let title = sectionID;
        if (sectionID == '特殊') {
            title = '#';
        }
        return(
            <View style={styles.Header}>
                <Text style={styles.HeaderText}>{title}</Text>
            </View>
        );
    }

    renderRow(rowData,sectionID,rowID,highlightRow) {
        let {resource} = this.props;
        let obj = resource&&resource.get('filterSub')?resource.get('filterSub'):null;
        let key = obj?obj.get('key'):null;

        return(
            <ScreenSubCell resource={rowData} keys={key} selectItem={this.props.selectItem}/>
        );
    }

    render() {
        let {resource} = this.props;

        let obj = resource&&resource.get('filterSub')?resource.get('filterSub'):null;
        let key = obj?obj.get('key'):null;
        let list = obj?obj.get('list'):null;

        if (key == 'brand') {
            let object = obj?obj.toJS():null;
            let keyList = obj?obj.get('keyList'):null;
            let keyLists = keyList?keyList.toJS():[];
            let allObj = object?object.allObj:null;
            let specialList = object?object.specialList:null;
            let dataSourceList =  list?list.toJS():{};
            let dataSource = {};

            if (specialList && specialList.length>0) {
                keyLists.unshift('#');
                dataSource = {
                    所有品牌: [allObj],
                    特殊: specialList,
                    ...dataSourceList,
               };
            }else {
                dataSource = {
                    所有品牌: [allObj],
                    ...dataSourceList,
                };
            }
            let ketList_new = Immutable.fromJS(keyLists);
            return (
                <View style={styles.container}>
                    <ListView
                        ref='brandList'
                        contentContainerStyle={styles.contentContainer}
                        enableEmptySections={true}
                        dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                        renderRow={this.renderRow}
                        renderSectionHeader={this.renderSectionHeader}
                    />
                    <IndexListView dataSource={ketList_new.toArray()} onLetterPress={this.scrollToSection}/>
                </View>
            );
        }else {
            let dataSourceList =  list?list.toJS():[];
            return (
                <View style={styles.container}>
                    {list?<ListView
                        ref='ScreenSubList'
                        enableEmptySections={true}
                        dataSource={this.dataSource.cloneWithRows(dataSourceList)}
                        renderRow={this.renderRow}
                    />:null}
                </View>
            );
        }
    }
}

let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f4f4f4',
    },
    HeaderText: {
        marginLeft: 10,
        fontSize: 18,
        fontWeight: 'bold',
        color: 'rgb(146, 146, 146)'
    },
    Header: {
        justifyContent: 'center',
        width: width,
        height: 30,
    }
});