'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?rowData.get('cover'):null;
        let originurl = cover?cover.get('cover'):null;
        if (!originurl) {
            return null;
        }
		let url = getSlicedUrl(originurl, 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.scrollTo && this.props.scrollTo();
	                    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'}>
                                <View style={{width: 10,height: 10,marginLeft: itemW - 20 - 2*borderWidth - 12,marginTop: itemH - 20 - 2*borderWidth - 12,backgroundColor: 'white',borderRadius: 5}}>
                                </View>
                            </Image>
						</View>
					</TouchableOpacity>
                </View>
            </View>
        );
    }

    render() {
		let {resource,goods_group_Filter} = this.props;
		this.selectedIndex = goods_group_Filter;

		let list = resource?resource.get('data'):null;
		if (!list || list.size == 0) {
			return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
		}

        let  arrow_up_offset = ((Math.ceil(this.selectedIndex)+1) *2 - 1)*10 + (itemW-20) * ((Math.ceil(this.selectedIndex)+1) - 0.5) - 8;

        return (
            <View style={[styles.container]}>
                <ListView
                    contentContainerStyle={[styles.contentContainer]}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    renderRow={this._renderRow}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
                <View style={{width: width,height: 10,backgroundColor: 'white',}}>
                </View>
                <View style={{width: width,height: 9,backgroundColor: 'white'}}>
                    <View style={styles.line}/>
                    <Image source={require('../../image/global_arrow_up.png')} style={{marginLeft: arrow_up_offset,width: 16,height: 9,backgroundColor: 'transparent'}}>
                    </Image>
                </View>
            </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',
    },
    line: {
        position: 'absolute',
        marginTop:8,
        width: width,
        height: 1,
        backgroundColor: '#e0e0e0',
    }
});