'use strict';

import React, {Component} from 'react';
import ScreenSubCell from '../cell/ScreenSubCell';
import Immutable, {Map} from 'immutable';
import IndexListView from '../../../classify/components/brand/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){
        console.log(sectionID);
    }

    renderSectionHeader(sectionData, sectionID) {
        return(
            <View style={styles.Header}>
                <Text style={styles.HeaderText}>{sectionID}</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 dataSourceList =  list?list.toJS():{};
            let keyList = list.keySeq()?list.keySeq().toJS():[];
            keyList.shift();
            keyList = Immutable.fromJS(keyList);
            return (
                <View style={styles.container}>
                    <ListView
                        ref='brandList'
                        contentContainerStyle={styles.contentContainer}
                        enableEmptySections={true}
                        dataSource={this.dataSource.cloneWithRowsAndSections(dataSourceList)}
                        renderRow={this.renderRow}
                        renderSectionHeader={this.renderSectionHeader}
                    />
                    <IndexListView dataSource={keyList.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,
    }
});