'use strict';

import React from 'react';
import ReactNative from 'react-native';

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


export default class BrandProductFilter extends React.Component {

    constructor(props) {
        super (props);

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

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

        this.state = {
            filters: [
                {
                    key: 'new',
                    name: '推荐',
                    value: {
                        asc: 's_t_desc',
                        desc: 's_t_desc',
                    },
                    isAsc: false,
                    radio: true,
                },
                {
                    key: 'price',
                    name: '价格',
                    value: {
                        asc: 's_p_asc',
                        desc: 's_p_desc',
                    },
                    isAsc: false,
                    radio: false,
                },
                {
                    key: 'discount',
                    name: '折扣',
                    value: {
                        asc: 'p_d_asc',
                        desc: 'p_d_desc',
                    },
                    isAsc: false,
                    radio: false,
                },
            ],
            selectedIndex: 0,
        };


        this.images = {
            normal: require('../../../brandStore/image/filter/shared_segmentedcontrol_other_normal.png'),
            asc: require('../../../brandStore/image/filter/shared_segmentedcontrol_other_up.png'),
            desc: require('../../../brandStore/image/filter/shared_segmentedcontrol_other_down.png'),
            down:require('../../../brandStore/image/filter/brandstore_filter_arrow_down.png'),
            down_normal:require('../../../brandStore/image/filter/brandstore_filter_arrow_down_normal.png'),
            up:require('../../../brandStore/image/filter/brandstore_filter_arrow_up.png'),
            up_normal:require('../../../brandStore/image/filter/brandstore_filter_arrow_up_normal.png'),
        };
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.selectOrder==''){
             this.setState({
                    selectedIndex: 0,
                });
        }
    }

    _renderImage(rowData, rowID) {
        let img;
        if(rowID==0){
            img = null;
        }else if(rowID==3){
            img = this.props.lastSelected ? this.images.up : this.images.down_normal;
        }else{
            if (rowID == this.state.selectedIndex){
                img = rowData.isAsc ? this.images.asc : this.images.desc;
            }else{
                img = this.images.normal;
            }
        }
        return <Image style={styles.image} source={img}/>;
    }

    _renderRow(rowData, sectionID, rowID) {
        let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
        if (rowID == 3) {
            colorStyle = this.props.lastSelected ? {color: '#444444'} : {color: '#b0b0b0'};
        }

        if(rowID==0){

        }
        return (
            <View style={{backgroundColor: 'white'}}>
                <TouchableOpacity style={{backgroundColor: 'white', flex: 1}} onPress={() => {

                    let filters = this.state.filters;
                    let filter = this.state.filters[rowID];
                    if (rowID == 3) {
                        let value = 'filter';
                        this.props.onPressFilter && this.props.onPressFilter(value);
                        return;
                    }
                    filter.isAsc = !filter.isAsc;
                    filters[rowID] = filter;
                    this.setState({
                        selectedIndex: rowID,
                        filters,
                    });

                    let value = filter.isAsc ? filter.value['asc'] : filter.value['desc'];
                    this.props.onPressFilter && this.props.onPressFilter(value);
                }}>
                    <View key={'row' + rowID} style={styles.rowContainer}>
                        <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
                        {this._renderImage(rowData, rowID)}
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    _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.state.filters)}
                    renderRow={this._renderRow}
                    renderSeparator={this._renderSeparator}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
                <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
            </View>

        );
    }
}

let selCol = '444444'
let norCol = 'b0b0b0'

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

let styles = StyleSheet.create({
    container: {
        marginLeft: -1,
        width: width + 2,
        height: 40,
        backgroundColor:'white',
    },
    contentContainer: {
        flexDirection: 'row',
        backgroundColor:'white',
    },
    rowContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        width: Math.ceil(width / 3),
        height: 40,
        backgroundColor: 'white',
    },
    name: {
        color: '#b0b0b0',
    },
    image: {
        marginTop: 2,
        marginLeft: 2,
    },
    separator: {
        width: 0.5,
        top: 12.5,
        height: 15,
        backgroundColor: '#e5e5e5',
    },
});