'use strict';

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

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

import Immutable, {Map} from 'immutable';

export default class LimitCodeProductsCell extends React.Component {

    constructor(props) {
        super (props);
    }

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

    render() {
		let {resource} = this.props;
		let data = resource?resource.toJS():null;
		if (!data) {
			return null;
		}
		let defaultUrl = data.defaultUrl;
		let newSrc = getSlicedUrl(defaultUrl, 100, 100);
		let price = data.price;
		let productName = data.productName;
		let limitCode = data.limitCode;
		let limitCodeTitle = '限购码: ' + limitCode;
		let status = data.status;

		return (
            <View style={styles.container}>
				{status == 1 ? <View style={{width: width,height: 20,backgroundColor: '#e5e5e5',}}/> : null}
				<TouchableOpacity activeOpacity={1} style={{width: width,height: backgroundHeigth,backgroundColor: '#e5e5e5',}}
				   onPress={() => {
						this.props.onPressLimitCodeProducts && this.props.onPressLimitCodeProducts(data)
				   }}
				>
					<View style={styles.titleView}>
						<Image source={require('../../image/lp_list_icon.png')} style={styles.noLimitCodeIcon}></Image>
						<Text style={styles.titleText}>{limitCodeTitle}</Text>
					</View>
					<View style={{width: width - 10,height: 0.5,backgroundColor: '#e5e5e5',marginLeft: 10}}/>
					<View style={styles.bottomView}>
						<YH_Image
							url={newSrc}
							style={styles.productIcon}
						/>
						<View style={styles.detailView}>
							<Text style={styles.nameText} numberOfLines={2}>{productName}</Text>
							<Text style={styles.priceText}>{price}</Text>
						</View>
					</View>
				</TouchableOpacity>
				{status == 0 ? <View style={{width: width,height: 20,backgroundColor: '#e5e5e5',}}/> : null}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let backgroundHeigth = Math.ceil((200 / 640) * width);
let titleHeigth = Math.ceil((50 / 640) * width);
let iconWidth = Math.ceil((28 / 640) * width);
let iconHeigth = Math.ceil((23 / 640) * width);
let productIconWidth = backgroundHeigth - titleHeigth;
let productIconHeigth = backgroundHeigth - titleHeigth - 20;

let styles = StyleSheet.create({
	container: {
		width: width,
		height: backgroundHeigth + 20,
		backgroundColor: '#e5e5e5',
	},
	titleView: {
		width: width,
		height: titleHeigth,
		alignItems: 'center',
		flexDirection: 'row',
		backgroundColor: 'white',
	},
	titleText: {
		marginLeft: 3,
		fontSize: 13,
		color: 'black',
	},
	noLimitCodeIcon: {
		width: iconWidth,
		height: iconHeigth,
		resizeMode: 'contain',
		marginLeft: 10,
	},
	bottomView: {
		width: width,
		height: backgroundHeigth - titleHeigth - 1,
		alignItems: 'center',
		flexDirection: 'row',
		backgroundColor: 'white',
	},
	productIcon: {
		width: productIconWidth,
		height: productIconHeigth,
		resizeMode: 'contain',
		marginLeft: 12,
	},
	detailView: {
		width: width - productIconWidth - 30,
		height: backgroundHeigth - titleHeigth - 1,
	},
	priceText: {
		width: width - productIconWidth - 60,
		fontSize: 13,
		color: 'black',
		marginTop: 15,
		marginLeft: 10,
	},
	nameText: {
		width: width - productIconWidth - 60,
		fontSize: 13,
		color: 'black',
		marginTop: 12,
		marginLeft: 10,
	},
});