/**
 * Created by zack on 2018/5/2.
 */
import {
	View,
	Text,
	StyleSheet,
	FlatList,
	Platform,
	TouchableOpacity,
	ImageBackground,
	Image
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../../utils/DimensionsTools'

export default class FollowingItem extends Component {
	render() {
		return (
			<View style={styles.ImageView}>
				<View style={styles.TopView}>
					<View style={styles.UserInfoImageBgView}>
						<Image source={require('../../../../resources/images/TabBar/Community/Follow/user1.png')} style={styles.UserHeaderImageView} />
						<View style={styles.UserInfoBgView}>
							<Text style={styles.NameText}>{'Zack'}</Text>
							<Text style={styles.TimeText}>{'50分钟前'}</Text>
						</View>
					</View>

					<Image source={require('../../../../resources/images/TabBar/Community/Follow/cancel.png')} style={styles.EyeImageView}/>
				</View>

				<Text style={styles.TitleText}>{"记忆要从读背开始，因为语言大都是从模仿开始的。"}</Text>

				<ImageBackground source={require('../../../../resources/images/TabBar/Community/Follow/img2.png')} style={styles.CenterImageBackground}>
					<Image source={require('../../../../resources/images/TabBar/Community/Follow/img_bg.png')} style={styles.ShadowImageView}/>
				</ImageBackground>

				<View style = {styles.BottomTagBgView}>
					<View style={styles.BottomLineView} />

					<TouchableOpacity style={styles.BottomButtonView}>
						<Image source={require('../../../../resources/images/TabBar/Community/Answer/like.png')} style={[styles.BottomButtonImageView, {marginLeft: 48}]}/>
						<Text style={styles.BottomButtonText}>{'29'}</Text>
					</TouchableOpacity>

					<TouchableOpacity style={styles.BottomButtonView}>
						<Image source={require('../../../../resources/images/TabBar/Community/Answer/mess.png')} style={styles.BottomButtonImageView}/>
						<Text style={styles.BottomButtonText}>{'68'}</Text>
					</TouchableOpacity>

					<TouchableOpacity style={styles.BottomButtonView}>
						<Image source={require('../../../../resources/images/TabBar/Community/Answer/Forward.png')} style={[styles.BottomButtonImageView]}/>
						<Text style={[styles.BottomButtonText, {marginRight: 48}]}>{'453'}</Text>
					</TouchableOpacity>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: 377,
		backgroundColor: '#ffffff'
	},
	TopView: {
		width: ScreenDimensions.width,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	UserInfoImageBgView: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 14,
	},
	UserHeaderImageView: {
		height: 48,
		width: 48,
		marginLeft: 17,
		marginRight: 35,
	},
	UserInfoBgView: {
		justifyContent: 'center',
	},
	NameText: {
		fontSize: 17,
		color: '#000000'
	},
	TimeText: {
		marginTop: 8,
		fontSize: 17,
		color: '#9c9c9c'
	},
	EyeImageView: {
		marginRight: 12,
	},
	TitleText: {
		fontSize: 17,
		color: '#000000',
		marginTop: 30,
		marginBottom: 20,
		marginLeft: 13,
		marginRight: 13,
	},
	CenterImageBackground: {
		width: ScreenDimensions.width,
		height: 196,
	},
	ShadowImageView: {
		position: 'absolute',
		left: 0,
		bottom: 0,
	},
	BottomTagBgView: {
		width: ScreenDimensions.width,
		height: 56,
		backgroundColor: '#eef0ef',
		flexDirection: 'row',
	},
	BottomButtonView: {
		width: ScreenDimensions.width/3.0,
		height: 48,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'white'
	},
	BottomButtonImageView: {
		marginRight: 13,
	},
	BottomButtonText: {
		fontSize: 13,
		color: '#9c9c9c'
	},
	BottomLineView: {
		position: 'absolute',
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#d7d7d7',
		left: 0,
		top: 0,
	},
})