React-Nav-Melon/screens/NewsDetailPage.js

import { StyleSheet, Text, View, TouchableWithoutFeedback, ScrollView, Image } from 'react-native'
import React, { useRef, useCallback, useMemo } from 'react'
import Header from '../components/atoms/Header'
import FeatherIcon from 'react-native-vector-icons/Feather'
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
import colors from '../theme/colors'
import fonts from '../theme/fonts'
import images from '../assets/images/images'
import IonIcon from 'react-native-vector-icons/Ionicons'
import BookmarkButton from '../components/organisms/Buttons/BookmarkButton'
import ShareButton from '../components/organisms/Buttons/ShareButton'
import {
    BottomSheetModal,
    BottomSheetModalProvider,
    BottomSheetView,
    BottomSheetScrollView
} from '@gorhom/bottom-sheet';
import ButtonWrapper from '../components/atoms/ButtonWrapper'
import CommentCard from '../components/organisms/Cards/CommentCard'




const NewsDetailPage = ({ navigation, headline, tagline, timestamp, author, newsText, image, comments }) => {

    const commentsData = [{},{},{},{},{}]
    const bottomSheetModalRef = useRef('');

    // Variables
    const snapPoints = useMemo(() => ['70%', '100%'], []);


    // Callbacks
    const handlePresentModalPress = useCallback(() => {
        bottomSheetModalRef.current?.present();
    }, []);

    const handleCloseModalPress = () => bottomSheetModalRef.current.close();

    const handleSheetChanges = useCallback((index) => {
        console.log('handleSheetChanges', index);
    }, []);


    return (

        <BottomSheetModalProvider>
            <ScrollView>
                <View style={styles.container}>
                    <Header>
                        <TouchableWithoutFeedback onPress={() => { navigation.goBack() }}>
                            <FeatherIcon name={'chevron-left'} size={24} color={colors.black} />
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
                            <MaterialIcon name='list' color={colors.topColor} size={30} />
                        </TouchableWithoutFeedback>
                    </Header>
                    <View style={styles.newsContainer}>
                        <Text style={styles.headline}>
                            {headline ?? "ICICI Securities sees over 49% upside potential on this chemical stock"}
                        </Text>
                        <Text style={styles.tagline}>
                            {tagline ?? "The reason behind theirent is that iPhone users have been The reason behind theirent is that iPhone.."}
                        </Text>
                        <View style={styles.descriptors}>
                            <Text style={styles.descriptorText}>{timestamp ?? "15 min ago"}</Text>
                            <Text style={styles.descriptorText}>{author ?? "By Lucy Hiddleston"}</Text>
                        </View>
                        {/* Test Card */}
                        <View style={styles.imagesContainer}>
                            <Image source={image ?? images.verticalCard} style={styles.image} />
                        </View>
                        <View style={styles.utilButtons}>
                            <TouchableWithoutFeedback onPress={handlePresentModalPress}>
                                <View style={styles.commentSection}>
                                    <IonIcon name="chatbubble-outline" size={fonts.getSize(20)} color={colors.topColor} />
                                    <Text style={styles.commentText}>{comments ?? 123} COMMENTS</Text>
                                </View>
                            </TouchableWithoutFeedback>
                            <View style={{ flexDirection: 'row' }}>
                                <BookmarkButton
                                    buttonStyle={styles.buttonStyle}
                                    iconSize={20}
                                    onPress={true}
                                />
                                <ShareButton
                                    buttonStyle={styles.buttonStyle}
                                    iconSize={20}
                                    onPress={true}
                                />
                            </View>
                        </View>
                        <Text style={styles.newsText}>
                            {newsText ?? "Samsung had a pretty quiet Mobile World Congress event, but it did tell us we’d learn more about its upcoming Google-approved smartwatch at its next Unpacked event. Unfortunately, the company didn’t tell us when exactly that would be, but a new report from Korean publication DigitalDaily News (via 9to5Google) claims the next Unpacked will take place on August 11, at 10 AM ET."}
                        </Text>
                        <TouchableWithoutFeedback onPress={true}>
                            <Text style={styles.backToTopText}>Back to Top</Text>
                        </TouchableWithoutFeedback>
                    </View>

                    <>
                        <BottomSheetModal
                            ref={bottomSheetModalRef}
                            index={1}
                            snapPoints={snapPoints}
                            onChange={handleSheetChanges}
                        >
                            <BottomSheetScrollView>
                                <BottomSheetView style={{ paddingHorizontal: fonts.getSize(24) }}>
                                    <BottomSheetView style={styles.commentInputContainer}>
                                        <Text style={{ fontFamily: fonts.type.semibold, color: colors.black, fontSize: fonts.getSize(16) }}>
                                            Comments
                                        </Text>
                                        <ButtonWrapper onPress={handleCloseModalPress}>
                                            <IonIcon name='close-sharp' size={fonts.getSize(20)} color={colors.black} />
                                        </ButtonWrapper>
                                    </BottomSheetView>
                                    <View style={styles.commentInput}>
                                        <Image source={images.imageCard} style={[styles.profileImage]} />
                                        <Text >Comment Text Input</Text>
                                    </View>
                                    <>
                                        <Text style={{fontFamily:fonts.type.medium, color: colors.black,paddingBottom: fonts.getSize(8)}}>View all Comments(04)</Text>
                                    </>
                                    <BottomSheetView style={{gap:fonts.getSize(16)}}>
                                       {commentsData.map(() => <CommentCard />)}
                                    </BottomSheetView>

                                </BottomSheetView>
                            </BottomSheetScrollView>

                        </BottomSheetModal>
                    </>
                </View>
            </ScrollView>
        </BottomSheetModalProvider>



    )
}

export default NewsDetailPage

const styles = StyleSheet.create({
    newsContainer: {
        paddingHorizontal: fonts.getSize(24)
    },
    headline: {
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(18),
        paddingVertical: fonts.getSize(8),
        color: colors.black,

    },
    tagline: {
        fontFamily: fonts.type.regular,
        color: colors.gray
    },
    descriptors: {
        flexDirection: 'row',
        gap: fonts.getSize(16),
    },
    descriptorText: {
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(10),
        color: colors.black,
        paddingTop: fonts.getSize(8),
        paddingBottom: fonts.getSize(16)
    },
    newsText: {
        color: colors.gray,
        fontFamily: fonts.type.regular,
        lineHeight: fonts.getSize(24),
        paddingVertical: fonts.getSize(4)
    },
    backToTopText: {
        color: colors.topColor,
        alignSelf: 'center',
        justifyContent: 'center',
        paddingVertical: fonts.getSize(16),
        fontSize: fonts.getSize(16),
        fontFamily: fonts.type.regular,
        textDecorationStyle: 'solid',
        textDecorationLine: 'underline'
    },
    imagesContainer: {
        width: "auto",
        height: fonts.getSize(196),
        paddingHorizontal: 0
    },
    image: {
        borderRadius: fonts.getSize(4),
        width: '100%',
        height: '100%'
    },
    utilButtons: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingVertical: fonts.getSize(4)
    },
    buttonStyle: {
        padding: fonts.getSize(8)
    },
    commentSection: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        gap: fonts.getSize(8),
        paddingLeft: fonts.getSize(4)
    },
    commentText: {
        fontFamily: fonts.type.regular,
        color: colors.gray
    },
    commentInputContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center', 
        paddingVertical: fonts.getSize(4)

    },
    profileImage: {
        height: 42,
        width: 42,
        borderRadius: 32,
        marginRight: fonts.getSize(16)

    },
    commentInput: {
        paddingVertical: fonts.getSize(16),
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexDirection: 'row'
    },

})