'use strict';

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

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


export default class BLKChannelSelector 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.id != r2.id,
        });

        this.channels = [
            {
                name: 'MEN男士',
                value: 'boy',
                id: 1,
                isSelect: false,
            },
            {
                name: 'WOMEN女士',
                value: 'girl',
                id: 2,
                isSelect: false,
            },
        ];
    }

    shouldComponentUpdate(nextProps){
        if ((nextProps.selectedChannelId == this.props.selectedChannelId)
            && (nextProps.selectedChannelValue == this.props.selectedChannelValue)) {
            return false;
        } else {
            return true;
        }
    }

    _renderRow(rowData, sectionID, rowID) {
        let isRowSelected = false;
        if (this.props.selectedChannelId >= 1) {
            isRowSelected = (rowID == this.props.selectedChannelId - 1);
        } else {
            isRowSelected = (rowData.value == this.props.selectedChannelValue);
        }

        let colorStyle = isRowSelected ? {color: '#444444', fontFamily: 'HelveticaNeue', fontSize: 14} : {color: '#b0b0b0', fontFamily: 'HelveticaNeue', fontSize: 13,};

        return (
            <TouchableOpacity activeOpacity={1} onPress={() => {
                if (isRowSelected) {
                    return;
                }

                let channel = this.channels[rowID];

                this.props.onSelectChannel && this.props.onSelectChannel(channel);
            }}>
                <View key={'row' + rowID} style={styles.rowContainer}>
                    <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
                </View>
            </TouchableOpacity>
        );
    }

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

    render() {

        let {style} = this.props;

        return (
            <View style={[styles.container, style]}>
                <ListView
                    contentContainerStyle={[styles.contentContainer, style]}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(this.channels)}
                    renderRow={this._renderRow}
                    renderSeparator={this._renderSeparator}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
            </View>
        );
    }
}

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

//let viewHeight = (Platform.OS === 'ios') ? 44 : 50;
let viewHeight = 44;


let styles = StyleSheet.create({
    container: {
        width: width,
        height: viewHeight,
        borderTopColor: 'transparent',
        borderBottomColor: '#e0e0e0',
        borderBottomWidth: 0.5,
		backgroundColor:'white',
    },
    contentContainer: {
        flexDirection: 'row',
    },
    rowContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        width: Math.ceil(width / 2),
        height: viewHeight,
		backgroundColor:'white',
    },
    name: {
        color: '#b0b0b0',
    },
    separator: {
        width: 0.5,
        top: 14,
        height: 16,
        backgroundColor: '#e0e0e0',
    },
});