'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 InterestActivityCell extends Component {

    constructor(props) {
        super(props);

    }
    

    render() {
        let {data, rowID} = this.props;
        let title = data.get('activity_name', '');
        let images = data.get('img', List()).toJS().slice(0, 1);
        let url = '';
        let jumpUrl = '';
        if (images.length > 0) {
            url = SlicedImage.getSlicedUrl(images[0].src, width * 2, imageHeight * 2, 2);
            jumpUrl = images[0].url;
        }

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

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

                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                        this.props.onPressActivity && this.props.onPressActivity(jumpUrl, rowID);
                    }}
                >
                    <View style={styles.products}>
                        <Image style={styles.image} source={{uri: url}} />
                        <Text style={styles.title} numberOfLines={1}>{title}</Text>
                    </View>
                </TouchableOpacity>

                <View style={styles.bottomView} />
                
            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;

let imageHeight = 100 * DEVICE_WIDTH_RATIO;

let rowWidth = width;

let styles = StyleSheet.create({
    container: {
        width: rowWidth,
        backgroundColor: '#f0f0f0',
    },
    products: {
        flexDirection: 'column',
    },
    image: {
        width: width,
        height: imageHeight,
    },
    title: {
        fontSize: 12,
        fontWeight: 'bold',
        marginLeft: 15 * DEVICE_WIDTH_RATIO,
        marginRight: 15 * DEVICE_WIDTH_RATIO,
        marginTop: 4,
        height: 20,
    },
    bottomView: {
        width,
        height: 10,
        backgroundColor: '#f0f0f0',
    },
});