'use strict';

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

import MessageListCellFooter from './MessageListCellFooter'

export default class MessageListOrderCell extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let itemData = this.props.itemData;
        let body = itemData.get('body');
        let imageUri = body ? body.get('img_url','www.yohobuy.com') : 'www.yohobuy.com';
        let content = body ? body.get('content','') : '';
        imageUri = imageUri.replace('{width}', 46).replace('{height}', 60).replace('{mode}',2);

        return(
            <View style={styles.container}>
                <TouchableOpacity
                    onLongPress={() =>{
                        this.props.onLongPressListItem && this.props.onLongPressListItem(itemData);
                    }}
                >
                    <View style={styles.contentContainer}>
                        <Text
                             numberOfLines={2}
                             style={styles.titleStyle}
                        >
                            {itemData.get('title')}
                        </Text>
                        <View style={styles.descStyle}>
                            <Image
                                style={styles.iconStyle}
                                source={{uri: imageUri}}
                            />
                            <Text
                                style={styles.detail}
                                numberOfLines={3}
                            >
                                {content}
                            </Text>
                        </View>
                    </View>
                </TouchableOpacity>
                <MessageListCellFooter
                    onPressListItem={this.props.onPressListItem}
                    itemData={itemData}
                />
            </View>
        )
    };
}

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

let styles = StyleSheet.create({
    container: {
        backgroundColor: 'white'
    },
    contentContainer: {
        flex: 1,
        minHeight: 97,
        flexDirection: 'column'
    },
    titleStyle: {
        marginTop: 15,
        marginLeft: 15,
        fontSize: 14,
        fontWeight: 'bold',
        color: '#444444',
        marginRight: 15,
    },
    descStyle:{
        flexDirection: 'row'
    },
    iconStyle: {
        marginLeft: 15,
        marginTop: 10,
        marginBottom: 10,
        backgroundColor: 'transparent',
        width: 46,
        height: 60
    },
    detail:{
        marginLeft: 10,
        marginTop: 9,
        fontSize: 12,
        color: '#686868',
        maxWidth: width-15-50-10-20,
        lineHeight: 18,
    }
})