'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';

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


export default class ProductFliter extends React.Component {

    constructor(props) {
        super (props);

        this._renderRow = this._renderRow.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1.key != r2.key,
        });
		this.state = {
            selectedIndex: this.props.resource.fliter,
        };
    }

    shouldComponentUpdate(nextProps){

        if (Immutable.is(nextProps.resource, this.props.resource) && Immutable.is(nextProps.selectID, this.props.selectID)) {
            return false;
        } else {
            return true;
        }
    }

    _renderRow(rowData, sectionID, rowID) {

        let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};

        return (
            <TouchableOpacity
                activeOpacity={1}
                onPress={() => {
					this.setState({
						selectedIndex: rowID,
					});
                // this.props.onPressFilter && this.props.onPressFilter(rowID);
            }}>
                <View key={'row' + rowID} style={styles.rowContainer}>
                    <Text style={[styles.name, colorStyle]}>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (
            <View key={'sep' + rowID} style={styles.separator}>
            </View>
        );
    }

    render() {

        let {resource} = this.props;
        let res = resource.list.toJS();

		if (res.length == 0 || !res) {
			return null;
		}

        return (
            <View style={styles.container}>
                <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(res)}
                    renderRow={this._renderRow}
                    renderSeparator={this._renderSeparator}
                    scrollsToTop={false}
					horizontal={true}
					showsHorizontalScrollIndicator ={false}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        marginLeft: -1,
        width: width + 2,
        height: 37,
        borderTopColor: 'transparent',
        borderBottomColor: '#e5e5e5',
        borderWidth: 0.5,
		backgroundColor:'white',
    },
    contentContainer: {
        flexDirection: 'row',
    },
    rowContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        width: Math.ceil(width / 5),
        height: 37,
		backgroundColor:'white',
    },
    name: {
        color: '#b0b0b0',
    },
    separator: {
        width: 0.5,
        top: 37 / 4,
        height: 37 / 2,
        backgroundColor: '#e5e5e5',
    },
});