'use strict';

import React from 'react';
import ReactNative from 'react-native';
import {getSlicedUrl} from '../../utils/Utils';
import Immutable, {Map} from 'immutable';

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

export default class NewHotBannerListCell extends React.Component {
    constructor(props) {
      super(props);
    }

    shouldComponentUpdate(nextProps){

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

    render() {
		let rowData = this.props.rowData;
		let newSrc = getSlicedUrl(rowData.get('brand_ico'), width, height, 2);
        let name = rowData.get('brand_name');

		return (
			<TouchableOpacity activeOpacity={0.5} onPress={() => {
				this.props.onPressBrandItem && this.props.onPressBrandItem(rowData.toJS());
			}}>
				<View style={styles.rowContainer}>
					<Image
						source={{uri: newSrc}}
						style={styles.thumbnail}
						resizeMode={'contain'}
					>
					</Image>
                    <View style={styles.itemTitle}>
                        <Text style={styles.itemText} numberOfLines={1}>{name}</Text>
                    </View>
				</View>
			</TouchableOpacity>
		);
    }
};

let width = Math.ceil((Dimensions.get('window').width - 40) / 3);
let height = width - 40;

let styles = StyleSheet.create({
	thumbnail: {
		width: width,
		height: height,
        marginLeft: 10,
        marginTop: 20,
        backgroundColor: 'white',
	},
	itemTitle: {
		justifyContent: 'center',
		height: 30,
		width: width,
        marginLeft: 10,
		backgroundColor: 'white',
    },
    itemText: {
        fontWeight: 'bold',
		textAlign: 'center',
		color: 'gray',
		fontSize: 10,
    },
    rowContainer: {
		backgroundColor:'white',
    },
});