'use strict';

import React from 'react';
import ReactNative from 'react-native';
import {getSlicedUrl} from '../../../classify/utils/Utils';

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


export default class GoodsGroupHeader extends React.Component {

    constructor(props) {
        super (props);

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

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

        this.selectedIndex = 0;
    }

    _renderRow(rowData, sectionID, rowID) {


		let cover = rowData.get('cover');
		let url = getSlicedUrl(cover.get('cover'), 640, 640, 2);
		let borderWidth = 0;
		if (this.selectedIndex == rowID) {
			borderWidth = 1;
		}

        return (
            <View style={{backgroundColor: 'white'}}>
                <View key={'row' + rowID} style={styles.rowContainer}>
					<TouchableOpacity onPress={() => {
						if (this.selectedIndex == rowID) {
							return;
						}
	                    this.props.onPressFilter && this.props.onPressFilter(rowID);
	                }}>
						<View style={{width: itemW - 20,height: itemH - 20,borderColor: 'black',borderWidth: borderWidth}}>
							<Image source={{uri: url}} style={{width: itemW - 20 - 2*borderWidth,height: itemH - 20 - 2*borderWidth,backgroundColor:'white',}} resizeMode={'contain'}></Image>
						</View>
					</TouchableOpacity>
                </View>
            </View>
        );
    }

    render() {
		let {resource} = this.props;
		let rowData = resource?resource.rowData:null;
		this.selectedIndex = resource?resource.goods_group_Filter:0;

		let list = rowData.get('data');
		if (!list || list.size == 0) {
			return null;
		}
		let scrollEnabled = list.size > 5?true:false;
        return (
            <View style={[styles.container]}>
                <ListView
                    contentContainerStyle={[styles.contentContainer]}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    renderRow={this._renderRow}
                    scrollEnabled={scrollEnabled}
                    scrollsToTop={false}
                />
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let itemW = Math.ceil(width / 5);
let itemH = itemW * (50/40);

let styles = StyleSheet.create({
    container: {
        width: width,
        height: itemH + 20,
		backgroundColor:'white',
    },
    contentContainer: {
        flexDirection: 'row',
    },
    rowContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        width: itemW,
        height: itemH + 20,
		backgroundColor:'white',
    },
});