'use strict';

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

import YH_Image from '../../../common/components/YH_Image';

export default class ProductCell extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.data;
        let prdImage = YH_Image.getSlicedUrl(data.get('default_images', ''), 80, 109, 2);
        let yh_exposureData = this.props.yh_exposureData ? this.props.yh_exposureData : null;
        return (
            <View>
                <View style={styles.fatherContainer}>
                    <TouchableOpacity
                        yh_exposureData={yh_exposureData} activeOpacity={1} style={[styles.container]}
                        onPress={() => {
                            this.props.onPressProduct && this.props.onPressProduct(data);
                        }}>
                        <View style={styles.container}>
                            <YH_Image style={styles.prdImage} url={prdImage}/>
                            <Text style={styles.prdName} numberOfLines={2}>{data.get('product_name', '')}</Text>
                            <View style={styles.priceContainer}>
                                <Text style={styles.nowPrice} numberOfLines={1}>¥{data.get('sales_price')}</Text>
                            </View>
                            <View style={[styles.bottomView, styles.returnTextContainer]}>
                                <Text style={styles.returnText}>最高返</Text>
                                <Text style={[styles.returnText, {
                                    marginLeft: 4,
                                    fontSize: 16
                                }]}>¥{data.get('rebates_amount')}</Text>
                            </View>
                            <View style={styles.shareContainer}>
                                <Text style={styles.share}>去分享</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.separator}/>
            </View>
        );
    }
};

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

let nameWidth = width - 15 - 80 - 15 - 15;

let styles = StyleSheet.create({
    fatherContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        padding: 15,
    },
    container: {
        flexDirection: 'row',
        width: width,
    },
    prdImage: {
        width: 80,
        height: 109
    },
    prdName: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
        marginTop: 3,
        marginLeft: 15,
        width: nameWidth,
        letterSpacing: -0.34,
    },
    priceContainer: {
        position: 'absolute',
        flexDirection: 'row',
        left: 95,
        top: 48
    },
    nowPrice: {
        fontSize: 14,
        color: '#B0B0B0',
    },
    bottomView: {
        position: 'absolute',
        left: 95,
        bottom: 11,
        width: nameWidth,
    },
    returnTextContainer: {
        flexDirection: 'row',
    },
    returnText: {
        fontSize: 14,
        color: '#D0021B',
        textAlign: 'center',
        textAlignVertical: 'center',
        alignSelf: 'center',
    },
    shareContainer: {
        position: 'absolute',
        width: 60,
        height: 30,
        right: 30,
        bottom: 5,
        borderRadius: 3,
        backgroundColor: '#D0021B',
        justifyContent: 'center',
    },
    share: {
        fontSize: 14,
        color: 'white',
        textAlign: 'center',
    },
    separator: {
        width,
        height: 1,
        backgroundColor: '#f0f0f0'
    },
});