'use strict'

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

import {Map} from 'immutable';
import YH_Image from '../../common/components/YH_Image';

export default class VIPPrivilegeCell extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {dataSource} = this.props;
        return (
            <TouchableOpacity activeOpacity={1.0} onPress={() => {
				this.props.onPressPrivilegeCell && this.props.onPressPrivilegeCell(dataSource);
			}}>
            <View style={styles.container}>
                <YH_Image url={dataSource.get('pic')} style={styles.image} />

                <View style={styles.descriptionContainer}>
                    <Text style={styles.title}>
                        {dataSource.get('title')}
                    </Text>
                    <Text style={styles.description}>
                    {dataSource.get('description')}
                    </Text>
                </View>
            </View>
            </TouchableOpacity>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        flexDirection: 'row',
        height: 69,
    },
    image: {
        marginLeft: 15,
        width: 35,
        height: 35,
        marginTop: 17,
    },
    descriptionContainer: {
        height: 69,
        width: width - 80,
        justifyContent: 'center',
    },
    title: {
        textAlign: 'left',
        fontSize: 12,
        marginBottom: 8,
    },
    description: {
        textAlign: 'left',
        fontSize: 12,
        lineHeight: 15,
        color: '#b0b0b0',

    }
});