blogDetailsScreen

import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { FlatList, ScrollView, StyleSheet, Text, View } from "react-native";
import { colors } from "../../../theme";
import CustomHeader from "../../../component/common/CustomHeader";
import FastImage from "react-native-fast-image";
import { dummyProfilePic, height, width } from "../../../constants/constants";
import { CategoryIndicator } from "../../../component/common/CategoryIndicator";
import fonts from "../../../assets/fonts";
import { BlogDetailsComponent } from "../../../component/common/BlogDetailsComponent";
import RenderHTML from "react-native-render-html";
import { BlogRecommendationCard } from "../../../component/blogs/BlogRecommendationCard";
import { useDispatch, useSelector } from "react-redux";
import { storeBlogDetails } from "../../../redux/actions/blogs";
import moment from "moment";
import { IMAGE_URL } from "../../../api/Urls";
import { getAllBlogs } from "../../../api";
import { ShowErrorMessage } from "../../../component/common/showErrorMessage";
import { trackScreenEvent } from "../../../utils/FirebaseTrackEvents";
import { useFocusEffect } from "@react-navigation/native";

export const BlogDetailsScreen = ({ route, navigation }) => {

    const [scrollY, setScrollY] = useState(0);
    const scrollviewRef = useRef()
    const dispatch = useDispatch()
    const { user } = useSelector(store => store?.userDetails)
    const url_slug = route?.params?.urlSlug
    const [urlSlugVal, setUrlSlugVal] = useState(url_slug)
    const urlParams = {
        page: 1,
        blog_slug: urlSlugVal
    }
    const { blogDetails, blogsData } = useSelector(store => store.blogs)
    const createDate = moment(blogDetails?.create_date).format('DD-MM-YY')

    const handleScroll = (event: any) => {
        const offsetY = event.nativeEvent.contentOffset.y;
        setScrollY(offsetY);
    };

    const getBlogDetailsData = params => {
        getAllBlogs(params).then(val => {
            if (val.data) {
                dispatch(storeBlogDetails(val.data.data?.blogs[0]))
            } else {
                ShowErrorMessage('something went wrong');
            }
        }).catch(err => console.log(err))
    }

    const renderRecommendedBlogs = ({ item }: { item: any }) => (
        <BlogRecommendationCard
            bannerImage={IMAGE_URL + item?.banner_image}
            category={item?.blog_type[0]?.name}
            title={item?.name}
            description={item?.meta_description}
            authorImage={item?.author?.image}
            authorName={item?.author?.name}
            readTime={`${item?.read_duration} mins`}
            uploadDate={createDate}
            onPress={() => {
                setUrlSlugVal(item?.url_slug)
                scrollviewRef.current?.scrollTo({
                    y: 0,
                    animated: true,
                });
            }
            }
        />
    )

    useEffect(() => {
        getBlogDetailsData(urlParams)
    }, [])

    useFocusEffect(
        useCallback(() => {
            const params = {
                user_id: user.user_id,
                screen_name: 'BlogDetail_Screen',
                is_event: 0,
            };
            trackScreenEvent(params);
        }, [])
    )

    useMemo(() => {
        getBlogDetailsData(urlParams)
    }, [blogDetails, urlSlugVal])

    return (
        <View
            style={styles.container}>
            <CustomHeader
                title={'Blog Details'}
                extraStyles={{
                    paddingBottom: 20
                }}
            />
            <FastImage
                source={{
                    uri: blogDetails?.banner_image ? IMAGE_URL + blogDetails?.banner_image : dummyProfilePic,
                    priority: FastImage.priority.normal
                }}
                style={{
                    ...styles.bannerImageStyles,
                    height: height * 0.339 - scrollY / 2,
                    opacity: 1 - scrollY / (height * 0.339),
                }}
            />
            <ScrollView
                bounces={false}
                onScroll={handleScroll}
                scrollEventThrottle={16}
                style={styles.scrollViewStyles}
                showsVerticalScrollIndicator={false}
                ref={scrollviewRef}
            >
                <View style={{ paddingHorizontal: 20, }}>
                    <CategoryIndicator
                        title={blogDetails?.blog_type[0]?.name}
                        containerStyles={styles.categoryIndicatorStyles}
                    />
                    <Text style={styles.blogTitleStyles}>{blogDetails?.name}</Text>
                    <BlogDetailsComponent
                        authorImage={blogDetails?.author?.image}
                        authorName={blogDetails?.author?.name}
                        readTime={`${blogDetails?.read_duration} mins`}
                        uploadDate={createDate}
                    />
                    <RenderHTML
                        source={{ html: blogDetails?.details }}
                        contentWidth={width}
                    />
                    <Text style={styles.title2Styles}>Recommended for you</Text>
                </View>
                <View style={{ paddingBottom: 50 }}>
                    <FlatList
                        data={blogsData?.most_read_blogs}
                        renderItem={renderRecommendedBlogs}
                        horizontal
                        showsHorizontalScrollIndicator={false}
                        bounces={false}
                    />
                </View>
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.white,
    },
    bannerImageStyles: {
        width: width,
        height: height * .339,
    },
    scrollViewStyles: {
        borderTopLeftRadius: 24,
        borderTopRightRadius: 24,
        backgroundColor: colors.white,
        marginTop: -20,
    },
    categoryIndicatorStyles: {
        backgroundColor: '#F6FAFF',
        alignSelf: 'flex-start',
        marginTop: 26
    },
    blogTitleStyles: {
        fontFamily: fonts.PoppinsRegular,
        fontSize: 20,
        fontWeight: '500',
        color: colors.mainBlack,
        marginVertical: 12
    },
    title2Styles: {
        fontFamily: fonts.PoppinsRegular,
        fontWeight: '600',
        fontSize: 18,
        color: colors.mainBlack,
        marginTop: 10,
        marginBottom: 24,
    }
})