/**
 * 首页 NFT Group 卡片
 */
import React, { useState, useEffect } from 'react';
import { postRequest } from '@/netWork/index';
import { Image, StyleSheet, Text, View, FlatList, Pressable } from 'react-native';

const NftGroupDetail = (props: any) => {
	const { navigation, route } = props;
	const { groupId } = route.params;
	const [ nftList, setNftList ] = useState([]);

	const goDetail = (item: any) => {
		if (item.postId) {
			let url = `https://twitter.com/${item.screenName}/status/${item.postId}`;
			navigation.navigate('Twitter', {
				webUrl: url,
			})
		}
		
	}

	const renderItem = ({ item }: any) => {
		return (
			<View style={styles.listRow}>
				<Image
					style={styles.listImage}
					source={{ uri: item.avatarUrl }}
				/>
				<View style={styles.listContent}>
					<View style={styles.listTitle}>
						<Text style={styles.listName}>{ item.nickName }</Text>
						<Text style={styles.screenName}> @{ item.screenName }</Text>
					</View>
					<Text style={styles.textContent}>{ item.textContent }</Text>
					<Pressable
						style={styles.detailView}
						onPress={() => {
							goDetail(item)
						}}>
						<Text style={styles.text}>Details</Text>
						<Image style={styles.arrow} source={ require('../static/img/icon/icon-arrow-right.png') } />
					</Pressable>
				</View>
			</View>
		)
	}

	useEffect(() => {
		postRequest('/denet/nft/group/post/list', {
			groupId: groupId,
			pageSize: 100,
			preTimestamp: '',
		}).then(res => {
			let { code, data } = res;
			if (code === 0) {
				data = data.filter((item: any) => {
					return item.textContent !== ''
				})
				setNftList(data);
			}
		})
	}, [groupId]);

	return (
		<View style={styles.listView}>
			<FlatList
				data={nftList}
				renderItem={renderItem}>
			</FlatList>
		</View>
	);
};

const styles = StyleSheet.create({
	listView: {
		flex: 1,
		backgroundColor: '#fff',
	},
	listRow: {
		padding: 15,
		flexDirection: 'row',
		justifyContent: 'space-around',
		borderBottomWidth: 1,
		borderBottomColor: '#F0F3F4',
	},
	listImage: {
		width: 47,
		height: 47,
		marginRight: 11,
		borderRadius: 47,
	},
	listContent: {
		flex: 1,
		fontSize: 15,
		color: '#101318',
	},
	listTitle: {
		flexDirection: 'row',
		marginBottom: 4,
	},
	listName: {
		fontSize: 15,
		color: '#101318',
		fontWeight: 'bold',
		marginRight: 8,
	},
	screenName: {
		fontSize: 15,
		color: '#56636F',
		fontWeight: 'bold',
	},
	textContent: {
		lineHeight: 22,
		color: '#101318',
	},
	detailView: {
		marginTop: 7,
		marginLeft: 'auto',
		flexDirection: 'row',
	},
	text: {
		color: '#969696',
		fontSize: 15,
		marginRight: 8,
	},
	arrow: {
		width: 10,
		height: 16,
	}
});

export default NftGroupDetail;