'use strict';

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

import MessageListCellFooter from './MessageListCellFooter'
import SlicedImage from '../../../common/components/SlicedImage'
import EditIconView from './EditIconView'

export default class MessageListProductCell extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let {itemData, isEditing}= this.props;
        let body = itemData.get('body');
        let imageUri = body ? body.get('img_url','www.yohobuy.com') : 'www.yohobuy.com';
        let content = body ? body.get('product_name','') : '';
        let isSelected = itemData.get('isSelected');
        let salePrice = body ? body.get('sales_price','') : '';

        imageUri = SlicedImage.getSlicedUrl(imageUri, 46, 60, 2)

        let borderLeftWidth = isEditing ? 1 : 0;
        let borderLeftColor = isEditing ? '#e0e0e0' : 'transparent';
        let editStyle = {borderLeftWidth, borderLeftColor};

        return(
            <View style={styles.editContainer}>
                {
                    isEditing
                    ?
                    <EditIconView isSelected={isSelected} onSelectPress={() =>{
                        this.props.selectListItem&&this.props.selectListItem(itemData);
                    }}/>
                    :
                     null
                }
                <View style={[styles.container, editStyle]}>
                    <TouchableOpacity
                        activeOpacity={1}
                        disabled={isEditing}
                        onLongPress={() =>{
                            this.props.onLongPressListItem && this.props.onLongPressListItem(itemData);
                        }}
                        onPress={() =>{
                            this.props.onPressListItem && this.props.onPressListItem(itemData);
                        }}
                    >
                        <View style={styles.contentContainer}>
                            <Text
                                 numberOfLines={1}
                                 style={styles.titleStyle}
                            >
                                {itemData.get('title')}
                            </Text>
                            <View style={styles.descStyle}>
                                <Image
                                    style={styles.iconStyle}
                                    source={{uri: imageUri}}
                                    resizeMode="contain"
                                />
                                <View style={styles.detailContent}>
                                    <Text
                                        style={styles.detail}
                                        numberOfLines={2}
                                    >
                                        {content}
                                    </Text>
                                    <Text
                                        style={styles.price}
                                        numberOfLines={1}
                                    >
                                        {salePrice}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                    <MessageListCellFooter
                        onPressListItem={this.props.onPressListItem}
                        itemData={itemData}
                    />
                </View>
            </View>
        )
    };
}

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

let styles = StyleSheet.create({
    editContainer: {
        flexDirection: 'row'
    },

    container: {
        backgroundColor: 'white'
    },
    contentContainer: {
        flex: 1,
        minHeight: 97,
        flexDirection: 'column',
        backgroundColor: 'white'
    },
    titleStyle: {
        marginTop: 15,
        marginLeft: 15,
        fontSize: 14,
        fontWeight: 'bold',
        color: '#444444',
        marginRight: 15,
        backgroundColor: 'white',
        maxWidth: width-30,
    },
    descStyle:{
        flexDirection: 'row',
        backgroundColor: 'white'
    },
    iconStyle: {
        marginLeft: 15,
        marginTop: 10,
        marginBottom: 10,
        width: 46,
        height: 60,
        backgroundColor: 'white'
    },

    detailContent: {
        flexDirection: 'column',
        maxWidth: width-15-50-10-20,
    },

    detail: {
        marginLeft: 10,
        marginTop: 9,
        fontSize: 12,
        color: '#686868',
        lineHeight: 18,
        backgroundColor: 'white'
    },

    price: {
        marginLeft: 10,
        marginTop: 8,
        fontSize: 12,
        color: '#d0021b',
        lineHeight: 18,
        backgroundColor: 'white'
    }
})