'use strict';

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

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

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

	static getSlicedUrl(src, width, height, mode = 1) {
		if (!src) {
			return '';
		}

		width = PixelRatio.getPixelSizeForLayoutSize(width);
		height = PixelRatio.getPixelSizeForLayoutSize(height);
		let newSrc = src;
		if (src.indexOf('imageView') === -1 && src.indexOf('imageMogr') === -1) {
			newSrc = src + '?imageView2/' + mode + '/w/' + width + '/h/' + height;
		} else {
			newSrc = src.replace('{mode}', mode)
				.replace('{width}', width)
				.replace('{height}', height);
		}
		return newSrc;
	}

    render() {
		let rowData = this.props.rowData;
		let newSrc = NewHotBannerListCell.getSlicedUrl(rowData.brand_ico, width, height, 1);
		return (
			<TouchableOpacity activeOpacity={0.5} onPress={() => {
				// this.props.onPressRecommendItem && this.props.onPressRecommendItem(rowData.get('url'));
			}}>
				<View style={styles.rowContainer}>
					<Image
						source={{uri: newSrc}}
						style={styles.thumbnail}
						resizeMode={'contain'}
					>

						<View style={styles.itemTitle}>
							<Text style={styles.itemText} numberOfLines={1}>{rowData.brand_name}</Text>
						</View>
					</Image>
				</View>
			</TouchableOpacity>
		);
    }
};

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

let styles = StyleSheet.create({
	thumbnail: {
		borderWidth: 0.5,
		borderColor: '#CCC',
		width: width,
		height: height,
	},
	itemTitle: {
        marginLeft:5,
		marginTop: width - 30,
		justifyContent: 'center',
		height: 30,
		width: width - 10,
		backgroundColor: 'transparent',
    },
    itemText: {
        fontWeight: 'bold',
		textAlign: 'center',
		color: 'gray',
		fontSize: 10,
    },
});