import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
import { Text, View, } from '../Themed';
import { TextInput } from 'react-native-gesture-handler';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Animated, { Easing } from 'react-native-reanimated';

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
const halfWinWidth = winWidth / 2;
const ratio = winWidthP10 / 850; //541 is actual image width

const ArticleItem = (props: {id: number, title: string, image: string, category: string, visit: number, comment: number, createDate: string, summary: string, styleTitle: object}) => {
    const {id, title, image, category, visit, comment, createDate, summary, styleTitle} = props;
    return (
        <View key={id} style={styles.articleItem}>
            <Image style={styles.articleItemImg} source={{ uri: image }} />
            <View style={styles.articleItemInfo}>
                <Text style={[styles.articleItemName, styleTitle]} numberOfLines={4}>{title}</Text>
                <View style={styles.articleItemTimeView}>
                    <Text style={styles.articleItemTime}>{createDate}</Text>
                    <View style={styles.articleItemView}>
                        <FontAwesome style={styles.articleItemIcon} name="comment" />
                        <Text style={styles.articleItemViewText}>{comment}</Text>
                    </View>
                    <View style={styles.articleItemView}>
                        <FontAwesome style={styles.articleItemIcon} name="eye" />
                        <Text style={styles.articleItemViewText}>{visit}</Text>
                    </View>
                </View>
            </View>
        </View>
    )
}

export { ArticleItem };

const styles = StyleSheet.create({
    articleItem: {
        width: '100%',
        marginBottom: 20,
    },
    articleItemImg: {
        width: '100%',
        height: ratio * 450,
        marginBottom: 10,
    },
    articleItemInfo: {
        width: '100%',
    },
    articleItemName: {
        width: '100%',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#222222',
        marginBottom: 8,
    },
    articleItemTimeView: {
        flexDirection: 'row',
    },
    articleItemTime: {
        fontSize: 13,
        color: '#888',
        alignItems: 'center'
    },
    articleItemView: {
        flexDirection: 'row',
        marginLeft: 10,
        alignItems: 'center'
    },
    articleItemIcon: {
        fontSize: 11,
        color: '#2e9fff',
        marginRight: 2,
    },
    articleItemViewText: {
        fontSize: 13,
        color: '#888'
    },
})