'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    Platform,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} from 'react-native';

import Tags from '../../../common/components/ListCell/Tags';
import GPTags from '../../../common/components/ListCell/GPTags';
import YH_Image from '../../../common/components/YH_Image';
import Immutable, {Map} from 'immutable';
import DeviceInfo from 'react-native-device-info';

export default class GuangDetailProductCell extends Component {

    constructor(props) {
        super(props);

        this._renderTags = this._renderTags.bind(this);
        this._renderImages = this._renderImages.bind(this);
        this._renderPrice = this._renderPrice.bind(this);
    }

    shouldComponentUpdate(nextProps){
        if (Immutable.is(nextProps.data, this.props.data)
            && nextProps.similarIndex == this.props.similarIndex
            && nextProps.rowID == this.props.rowID) {
            return false;
        } else {
            return true;
        }
    }

    _renderTags() {
        let {data, sourceType} = this.props;
        let isGlobalProduct = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品
        return <Tags items={data.get('tags')}/>;
        if (isGlobalProduct) {
            let showGPLimitTag = data.get('is_limited') && data.get('is_limited') == 'Y';    // 全球购限量商品
            let countryName = data.get('country_name');  // 全球购国家名称

            return <GPTags title={countryName} limit={showGPLimitTag}/>;
        } else {
            return <Tags items={data.get('tags')}/>;
        }
    }

    _renderImages() {
        let {data, sourceType, similarIndex, rowID, showSimilarGuider} = this.props;

        let url = data.get('default_images', '').replace('{mode}', 2)
            .replace(/{width}/g, 290)
            .replace(/{height}/g, 386);
        let isGlobalProduct = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品

        if (isGlobalProduct) {
            let showGPSoldOut = isGlobalProduct && data.get('is_stock') && data.get('is_stock') == 'Y';    // 全球购售罄

            return (
                <View style={styles.imageContainer}>
                    <YH_Image style={styles.image} url={url}>
                        {showGPSoldOut ? <Image style={styles.gpSoldOutImage} source={require('../../../common/images/tag/gp_tip_SQ.png')}/> : null}
                    </YH_Image>
                </View>
            );
        } else {

        let showAlmostSoldOut = data.get('tags', []).indexOf('is_soon_sold_out') !== -1;    // 非全球购的即将售罄
        let showSoldOut = data.get('tags', []).indexOf('is_solded') !== -1;    // 非全球购的即将售罄
        let showOutletSoldOut = sourceType == 2 && data.get('storage_num') && data.get('storage_num') == 0;   // 数据源是奥莱才显示

            return (
                <View style={styles.imageContainer}>
                    <YH_Image style={styles.image} url={url}>
                        {showAlmostSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../../common/images/tag/tip_jjsq.png')}/> : null}
                        {showOutletSoldOut ? <Image style={styles.soldOutImage} source={require('../../../common/images/tag/outlet_sellout_bg.png')}/> : null}
                        {showSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../../common/images/tag/tip_ysq.png')}/> : null}
                    </YH_Image>
                </View>
            );
        }

    }

    _renderPrice() {
        let {data, sourceType, fromPage} = this.props;
        let isGlobalProduct = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品

        let salePrice = 0; // 售卖价
        let originPrice = 0; // 原价
        let salePriceStr = ''; // 拼接的售卖价
        let originPriceStr = ''; // 拼接的原价

        if (isGlobalProduct) {
            salePrice = parseFloat(data.get('final_price'));
            originPrice = parseFloat(data.get('orign_price'));
            salePriceStr = data.get('formart_final_price');
            originPriceStr = data.get('formart_orign_price');
        } else {
            salePrice = parseFloat(data.get('sales_price'));
            originPrice = parseFloat(data.get('market_price'));
            salePriceStr = '¥' + salePrice.toFixed(2);
            originPriceStr = '¥' + originPrice.toFixed(2);
        }
        return (
            <View style={styles.priceContainer}>
                <Text style={styles.nowPrice} numberOfLines={1}>{salePriceStr}</Text>
            </View>
        );
    }


    render() {
        let {data, sourceType, similarIndex, rowID} = this.props;
        let name = data.get('product_name') ? data.get('product_name') : '';
        let yh_exposureData = data && data.get('yh_exposureData') ? data.get('yh_exposureData').toJS() : {};
    		let prd_id = data.get('product_id') ? data.get('product_id') : '';
    		let isGlobal = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品
    		let is_limitbuy = data.get('is_limitbuy') && data.get('is_limitbuy') == 'Y'; // product.is_limitbuy=='Y'?true:false;
    		let product_skn = data.get('product_skn') ? data.get('product_skn') : '';
    
        return (
            <TouchableOpacity
                style={styles.container}
                activeOpacity={1}
                yh_exposureData={yh_exposureData}
                onPress={() => {
                    let pos_id = 103;
                    this.props.onPressProduct && this.props.onPressProduct(data, rowID,pos_id);
                }}
            >
                <View style={{overflow: 'hidden',backgroundColor: '#f0f0f0',height: Platform.OS === 'ios'?rowHeight:rowHeight+4,width: rowWidth+1,borderColor: '#e0e0e0',
		        borderWidth: 0.5}} >
                    {this._renderImages()}
                    <View style={styles.nameContainer}>
                        <Text style={styles.name} numberOfLines={2}>{name}</Text>
                    </View>
                    {this._renderPrice()}

					{is_limitbuy ?
						<TouchableOpacity style={styles.typeLookDetail} activeOpacity={0.5} onPress={() => {
                            let pos_id = 103;
							this.props.onPressProduct && this.props.onPressProduct(data, rowID,pos_id);
						}}>
							<Text style={styles.lookDetailText}>查看详情</Text>
							<Image source={require('../../../studentCertification/images/right_arrow.png')} style={styles.arrow_icon} resizeMode={'contain'}/>
						</TouchableOpacity>
						:
						<TouchableOpacity style={styles.typeShopCar} activeOpacity={0.5} onPress={() => {
							let pos_id = 106;
							this.props.onPressShopCar && this.props.onPressShopCar(product_skn,prd_id,pos_id,isGlobal);
						}}>
							<Image source={require('../../image/jrgwc.png')} style={styles.button} resizeMode={'contain'} />
						</TouchableOpacity>
					}

                </View>
            </TouchableOpacity>
        );
    }
}

let {width, height} = Dimensions.get('window');

const DEVICE_WIDTH_RATIO = width / 750;
let rowWidth = Math.ceil(320 * DEVICE_WIDTH_RATIO);
let rowHeight = Math.ceil(582 * DEVICE_WIDTH_RATIO);
let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO);
let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO);

let imageHeight = Math.ceil(425 * DEVICE_WIDTH_RATIO);

let almostSoldOutImageHeight = Math.ceil(30 * DEVICE_WIDTH_RATIO);
let almostSoldOutImageTop = imageHeight - almostSoldOutImageHeight;
let gpSoldOutImageHeight = Math.ceil(25 * DEVICE_WIDTH_RATIO);

let styles = StyleSheet.create({
    container: {
        width: rowWidth + 22,
        height: Platform.OS === 'ios'?rowHeight + 10:rowHeight+4 + 10,
        marginTop: rowMarginTop,
        marginBottom: rowMarginBottom,
        overflow: 'hidden',
    },
    rowContainer: {
        width: rowWidth,
        height: Platform.OS === 'ios'?rowHeight:rowHeight+4,
    },
    imageContainer: {
        width: rowWidth,
        height: imageHeight,
        backgroundColor: '#f0f0f0',
    },
    image: {
        width: rowWidth,
        height: imageHeight,
        backgroundColor: '#f0f0f0',
    },
    soldOutImage: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: rowWidth,
        height: imageHeight,
    },
    almostSoldOutImage: {
        top: almostSoldOutImageTop,
        width: rowWidth,
        height: almostSoldOutImageHeight,
        backgroundColor: '#ff9e0d',
    },
    nameContainer: {
		marginLeft: 10,
        marginTop: 25 * DEVICE_WIDTH_RATIO,
        width: rowWidth - 20,
    },
    name: {
        fontFamily: 'STHeitiSC-Light',
        fontSize: 12,
        color: '#444444',
    },
    priceContainer: {
		position: 'absolute',
		marginLeft: 10,
		width: 100,
		bottom: 20 * DEVICE_WIDTH_RATIO,
    },
    nowPrice: {
        fontSize: 12,
        color: '#d10922',
    },
    gpSoldOutImage: {
        position: 'absolute',
        top: 5,
        right: 5,
        width: gpSoldOutImageHeight,
        height: gpSoldOutImageHeight,
    },
	typeLookDetail: {
        position: 'absolute',
        bottom: 25 * DEVICE_WIDTH_RATIO,
        right: 10,
        width: 65,
        flexDirection: 'row',
        alignItems:"center",
    },
	button: {
        width: 40,
		height: 23,
    },
	typeShopCar: {
		position: 'absolute',
		bottom: 10*DEVICE_WIDTH_RATIO,
		right: 10*DEVICE_WIDTH_RATIO,
        width: 40,
		height: 23,
	},
	lookDetailText: {
		width: 50,
		fontSize: 12,
		color: '#444444',
		textAlign: 'right',
		fontWeight:'bold',
        marginLeft: 5,
		backgroundColor: '#f0f0f0',
	},
    arrow_icon: {
        width: 7,
        height: 8,
        position: 'absolute',
        right: 1,
    },
});