'use strict';

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

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

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

    render() {
		let rowData = this.props.rowData;
		let newSrc = getSlicedUrl(rowData.brand_ico, width, height, 2);
		let brand_id = rowData.id;
		let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.brand","params":{"brand_id":"${brand_id}"}}`;

		return (
			<TouchableOpacity activeOpacity={0.5} onPress={() => {
				this.props.onPressSlideItem && this.props.onPressSlideItem(url);
			}}>
				<View style={styles.rowContainer}>
					<Image
						source={{uri: newSrc}}
						style={styles.thumbnail}
						resizeMode={'contain'}
					>
					</Image>
                    <View style={styles.itemTitle}>
                        <Text style={styles.itemText} numberOfLines={1}>{rowData.brand_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',
    },
});