'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';

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

export default class ListCell extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.resource;
        if (!data) {
            return null;
        }
        let {
            default_images,
            product_skn,
            phrase,
            product_name,
            total_praised,
            is_praised
        } = data;
        default_images = default_images.replace('{width}', 240).replace('{height}', 320).replace('{mode}', 2);
        let likeImgSource;
        let likeTextColor;
        if (is_praised == 'Y') {
            likeImgSource = require('../../image/liked.png');
            likeTextColor = '#d0021b';
        } else if (is_praised == 'N') {
            likeImgSource =require('../../image/unlike.png')
            likeTextColor = '#b0b0b0';
        }
        let showPraiseButton = is_praised && total_praised;
        return (
            <TouchableOpacity style={styles.container} onPress={() => {
                this.props.onPressDetail && this.props.onPressDetail(product_skn, this.props.index, is_praised, total_praised)
            }}>
                <View style={styles.container}>
                    <Image style={styles.image} source={{
                        uri: default_images
                    }}/>

                    <View style={styles.rightPannel}>
                        <Text numberOfLines={2} style={styles.title}>{product_name}</Text>
                        <Text numberOfLines={4} style={styles.phrase}>{phrase}</Text>
                        {showPraiseButton
                        ?<TouchableOpacity style={styles.likeButton} activeOpacity={1} onPress={() => {
                            this.props.onPressLike && this.props.onPressLike(this.props.index);
                        }}>
                            <Image style={styles.likeImage} source={likeImgSource}/>
                            <Text style={[styles.likeText, {color: likeTextColor}]}>{total_praised}人说赞</Text>
                        </TouchableOpacity>
                        : null}
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        width: width,
        flexDirection: 'row',
        height: 180,
        overflow: 'hidden',
    },

    image: {
        marginTop: 10,
        marginLeft: 15,
        marginRight: 15,
        width: 120,
        height: 160,
        backgroundColor: '#e0e0e0'
    },

    rightPannel: {
        width: width - 150,
        height: 180,
        flexDirection: 'column',
        borderColor: '#ededed',
        borderBottomWidth: 1
    },

    likeButton: {
        position: 'absolute',
        width: 200,
        height: 40,
        paddingRight: 15,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        left: width - 150 - 200,
        top: 180 - 40
    },

    likeImage: {
        width: 17,
        height: 17,
        marginRight: 0
    },

    likeText: {
        fontSize: 12,
        color: '#b0b0b0',
        marginLeft: 4
    },

    title: {
        fontSize: 15,
        width: width - 150 - 15,
        marginTop: 20,
        marginBottom: 0,
        color: '#444444',
        fontWeight: 'bold',
        // backgroundColor: 'red',
    },

    phrase: {
        marginTop: 5,
        width: width - 150 - 15,
        fontSize: 13,
        color: '#b0b0b0',
        lineHeight: 18,
        // backgroundColor: 'red',
    }
});