'use strict';

import React from 'react';
import ReactNative from 'react-native';
import {isEmptyObject} from '../../utils/Utils';
import Immutable, {Map} from 'immutable';

const {
    View,
    Image,
    Text,
    TouchableOpacity,
    Dimensions,
    StyleSheet,
} = ReactNative;

export default class LatterListView extends React.Component {

    constructor(props) {
        super (props);
        this.onTouchMove = this.onTouchMove.bind(this);
        this.viewHeight = props.style.height;
    }

    shouldComponentUpdate(nextProps){
        if (Immutable.is(Immutable.fromJS(nextProps.dataSource), Immutable.fromJS(this.props.dataSource))) {
            return false;
        } else {
            return true;
        }
    }

    onTouchMove(e) {
        let {dataSource,distanceToContainer} = this.props;
        let Y =  e.nativeEvent.pageY - Math.ceil((this.viewHeight - dataSource.length * (itemHeight+2))/2) - 8 - distanceToContainer;
        var index = Math.ceil(Y/(itemHeight+2))-1;
        let sectionID = dataSource[index];
        this.props.onLetterPress && this.props.onLetterPress(index,sectionID);
    }

    render() {
        let {dataSource} = this.props;
        if (dataSource.length == 0) {
            return null;
        }

 		let keyData = [];

        keyData.push(<Image key={'search'} style={styles.image} source={require('../../images/search.png')}/>);
        for (var i = 0; i < dataSource.length; i++) {
            let name = dataSource[i];
            if (name == '0-9') {
				name = '0';
			}
            keyData.push(<Text key={i} style={styles.text}>{name}</Text>);
        }

        return (
            <View style={[styles.container, {height: this.viewHeight}]} onTouchStart={this.onTouchMove} onTouchMove={this.onTouchMove} >
				{keyData.map((elem, index) => {return elem;})}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let itemHeight = 12;

let styles = StyleSheet.create({
    container: {
		position: 'absolute',
		width: 20,
		bottom : 1,
		right: 1,
		backgroundColor: 'rgba(255,255,255,0.2)',
        alignItems: 'center',
		justifyContent: 'center',
    },
	text: {
		justifyContent: 'center',
		textAlign: 'center',
		fontSize: 10,
		color: 'black',
		backgroundColor: 'transparent',
        marginTop: 2,
	},
    image: {
        width: 8,
        height: 8,
    },
});