/**
 * Created by Sean on 2018/5/9.
 */
import {
	View,
	Text,
	StyleSheet,
    TouchableOpacity,
    TouchableWithoutFeedback,
    ScrollView,
    Image,
    Animated
} from 'react-native'
import React, {Component} from 'react'
import PropTypes from 'prop-types';
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'

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

    render() {
        return(
            <View style={styles.rowContainer}>
                <CAVideoListItem title={'How to Write the Alphabet in the D\"nealian Style\"'} 
                                 image={require('../../../resources/Play/Video/img_1.png')}
                                 viewCount={77}
                                 commentCount={643}/>
                <CAVideoListItem title={'How to Use \"To Have\"'} 
                                 image={require('../../../resources/Play/Video/img_2.png')}
                                 viewCount={789}
                                 commentCount={996}/>
            </View>
        );
    }
}

class CAVideoListItem extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return(
            <View style={styles.itemContainer}>
                <Image style={styles.itemImage} resizeMode={'contain'} source={this.props.image}/>
                <View style={styles.itemTitleContainer}>
                    <Text style={styles.itemTitle} numberOfLines={2} multiline={true}>
                        {this.props.title}
                    </Text>
                </View>
                <View style={styles.itemBottomContainer}>
                    <Image style={styles.itemBottomImage} resizeMode={'contain'} source={require('../../../resources/Play/Video/view.png')}/>
                    <Text style={styles.itemBottomTitle}>{this.props.viewCount}</Text>
                    <Image style={[styles.itemBottomImage, {marginLeft: 27}]} resizeMode={'contain'} source={require('../../../resources/Play/Video/mess.png')}/>
                    <Text style={styles.itemBottomTitle}>{this.props.commentCount}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    rowContainer: {
        flex: 1,
        flexDirection: 'row',
        width: ScreenDimensions.width,
        height: 160,
    },
    itemContainer: {
        flex: 1,
    },
    itemImage: {
        marginLeft: 9,
        marginTop: 16,
        width: (ScreenDimensions.width - 30) / 2,
        height: (ScreenDimensions.width - 30) / 2 * (93/165)
    },
    itemTitleContainer: {
        marginTop: 7,
        marginLeft: 9,
    },
    itemTitle: {
        fontSize: 11,
        width: (ScreenDimensions.width - 30) / 2,
    },
    itemBottomContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 11,
    },
    itemBottomImage: {
        height: 9,
        width: 14,
        justifyContent: 'center'
    },
    itemBottomTitle: {
        marginLeft: 3,
        fontSize: 10,
        color: "#aaaaaa",
    }
})