'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    ScrollView,
    Text,
    NativeAppEventEmitter,
    StyleSheet,
    ListView,
    Dimensions,
    TouchableOpacity,
    Image,
} from 'react-native';
import Immutable, {Map} from 'immutable';


export default class PickerView extends Component {

    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });

        this.type = "";
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {

        return (
            <TouchableOpacity activeOpacity={0.5} key={rowID} onPress={() => {
                switch (this.type) {
                    case 'education':
                        this.props.onSelectEdution && this.props.onSelectEdution(rowData);
                        break;
                    case 'years':
                        this.props.onSelectYear && this.props.onSelectYear(rowData);
                        break;
                    default:
                }
            }}>
                <View style={styles.rowCell}>
                    <Text style={{marginLeft: 15}}>
                        {rowData}
                    </Text>
                </View>
                <View style={styles.rowLine}></View>
            </TouchableOpacity>
        );
    }

    render() {
        let {resource, type} = this.props;
        this.type = type;
        return (
            <View style={styles.container}>
                <View style={styles.listViewContainer}>
                    <ListView
                        contentContainerStyle={[styles.contentContainerStyle]}
                        ref={(ref)=>this.listView=ref}
                        enableEmptySections={true}
                        dataSource={this.dataSource.cloneWithRows(resource)}
                        renderRow={this._renderRow}
                        showsHorizontalScrollIndicator={false}
                    />
                </View>
            </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.6)',
        flexDirection: 'column-reverse',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    listViewContainer: {
        backgroundColor: 'white',
    },
    contentContainerStyle: {
        width: width - 80,
        backgroundColor: '#dfe3e2',
    },


    rowCell: {
        justifyContent: 'center',
        height: 40,
        backgroundColor: 'white',
    },
    rowLine: {
        height: 1,
        backgroundColor: '#dfe3e2',
    },
});