import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React, { useContext } from 'react'
import colors from '../../../constants/colors'
import images from '../../../assets/images/images'
import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
import fonts from '../../../constants/fonts'
import { ThemeContext } from '../../../context/theme.context'
import { getTimestamp } from '../../../constants/functions'
import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
import ShareButton from '../../atoms/Buttons/ShareButton'


const VerticalNewsCard = ({ image, headline, tagline, style, timestamp, onPress }) => {

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme

    const styles = StyleSheet.create({
        cardContainer: {
            width: horizontalScale(200),
            maxWidth: horizontalScale(200),
            backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant,
            borderRadius: moderateScale(16),
            height: '100%',
            maxHeight: verticalScale(300),
            marginRight: horizontalScale(16),
            // paddingBottom: verticalScale(24),
            elevation: 4
        },

        imagesContainer: {
            width: '100%',
            height: '50%'

        },
        image: {
            borderRadius: moderateScale(16),
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0,
            width: '100%',
            height: '100%'
        },
        headline: {
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(13),
            color: colors().recessive,
            paddingBottom: 4,
            // width: '100%'
        },
        // tagline: {
        //     fontSize: 12,
        //     fontFamily: fonts.type.regular,
        //     height: 'auto',
        //     maxHeight: '25%',
        //     overflow: 'hidden',
        //     color: colors().recessive

        // },
        descriptorContainer: {
            flexDirection: 'row',
            // padding: moderateScale(16),
            justifyContent: 'space-between',
            // alignItems: 'baseline'
        },
        timeDescriptor: {
            color: colors().recessive_variant,
            fontFamily: fonts.type.regular,
            fontSize: moderateScale(12)
        },
        utilButtons: {
            flexDirection: 'row',
            gap: horizontalScale(8)
        },
        detailsContainer: {
            flexDirection: 'column',
            paddingHorizontal: horizontalScale(14),
            paddingVertical: verticalScale(8),
            justifyContent: 'space-between',
            alignItems: 'stretch',
            height: '47.5%',
            maxHeight: '50%'
        }

    })
    return (
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={[styles.cardContainer, style]}>
                <View style={styles.imagesContainer}>
                    <Image source={image ?? images.verticalCard} style={styles.image} />
                </View>
                <View style={styles.detailsContainer}>

                    <Text style={styles.headline}> {headline}</Text>
                    {/* <Text style={styles.tagline}>{tagline}</Text> */}

                    <View style={styles.descriptorContainer}>
                        <Text style={styles.timeDescriptor}>{getTimestamp(timestamp)}</Text>
                        <View style={styles.utilButtons}>
                            <BookmarkButton size={20} onPress={true} />
                            <ShareButton size={20} onPress={true} />
                        </View>
                    </View>
                </View>
            </View>
        </TouchableWithoutFeedback>
    )
}

export default VerticalNewsCard

