'use strict';

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

import {List} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import InterestHeader from './InterestHeader';
import DeleteLineText from '../../../common/components/DeleteLineText';

export default class InterestCell extends Component {

    constructor(props) {
        super(props);

    }
    

    render() {
        let {data, rowID} = this.props;
        let products = data.get('product', List()).toJS().slice(0, 3);

        return (
            <View style={styles.container}>

                <InterestHeader 
                    data={data} 
                    rowID={rowID}
                    onInterestLike={this.props.onInterestLike}
                    onPressBrand={this.props.onPressBrand}
                />

                <View style={styles.products}>
                    {products.map((item, i) => {
                        let url = SlicedImage.getSlicedUrl(item.product_img, 213, 284, 2);

                        let salePrice =  parseFloat(item.sale_price); // 售卖价
                        let originPrice = parseFloat(item.market_price); // 原价
                        let salePriceStr = '¥' + salePrice.toFixed(2); // 拼接的售卖价
                        let originPriceStr = '¥' + originPrice.toFixed(2); // 拼接的原价
                        let showOriginPrice = originPrice && (salePrice != originPrice);
                        let nowColor = showOriginPrice ? {} : {color: '#444444'};
                        let marginLeft = i != 0 ? 1 : 0;

                        return (
                            <TouchableOpacity
                                key={i}
                                activeOpacity={1}
                                onPress={() => {
                                    this.props.onPressProduct && this.props.onPressProduct(item, i, rowID);
                                }}
                            >
                                <View style={[styles.product, {marginLeft}]}>
                                    <Image style={styles.prdImage} source={{uri: url}} />
                                    <View style={styles.priceContainer}>
                                        <Text style={[styles.nowPrice, nowColor]} numberOfLines={1}>{salePriceStr}</Text>
                                        {showOriginPrice ? <DeleteLineText text={originPriceStr} /> : null}
                                    </View>                                
                                </View>
                            </TouchableOpacity>
                        );
                    })}
                </View>

                <View style={styles.bottomView} />

            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;

const IMAGE_WIDTH = 106;
const IMAGE_HEIGHT = 142;
const IMAGE_RATIO = IMAGE_HEIGHT / IMAGE_WIDTH;

let productWidth = Math.ceil(width / 3);
let productHeight = 178 * DEVICE_WIDTH_RATIO;
let imageHeight = productWidth * IMAGE_RATIO;
let priceHeight = productHeight - imageHeight;

let rowWidth = width;

let styles = StyleSheet.create({
    container: {
        width: rowWidth,
        backgroundColor: '#f0f0f0',
    },
    products: {
        flexDirection: 'row',
    },
    product: {
        width: productWidth,
        height: productHeight,
    },
    prdImage: {
        width: productWidth,
        height: imageHeight,
    },
    priceContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignSelf: 'center',
        alignItems: 'center',
        width: productWidth,
        height: priceHeight,
        backgroundColor: 'white',
    },
    nowPrice: {
        fontSize: 11,
        color: '#d0021b',
    },
    bottomView: {
        width,
        height: 15,
        backgroundColor: '#f0f0f0',
    },
});