import React, { useState, useEffect, useCallback, useRef } from 'react';
import { View, Text, Image, TouchableOpacity, Dimensions, Pressable, ScrollView, BackHandler, ActivityIndicator, FlatList} from 'react-native';
import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
import Feather from 'react-native-vector-icons/Feather';
import { Follow } from '../../Features/Follow/Follow';
import { Shortlist } from '../../Features/Shortlist';
import styles from './PostItemStyles';
import { Likes } from '../../Features/Likes';
import { shareContent } from '../../../Utils/shareContent ';
import { Avatar } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { PostActions } from './PostActions';
import useModal from '../../../Utils/UseModal';
import BottomModal from '../../../Components/BottomModal/BottomModal ';
import { ManagerRoleAccess } from '../../../Utils/RolecheckServices';
import axiosConfig from '../../../services/axiosConfig';
import LikesList from '../../Features/Likes/LikesList';
import Color from '../../../theme/Color';
import Poststyles from './PostStyles';
import Comments from '../../Features/Likes/Comments';
import timeAgo from '../../../Utils/timeAgo';
import { navigateToAccount } from '../../../Utils/NavigationAccount';

const PostItem = ({ item, frames_24, GetComments }) => {
    const { isModalVisible, toggleModal } = useModal()
    const [likesList, setLikesList] = useState([]);
    const [isModalVisible1, SetIsModalVisibal] = useState(false)
    const [selectedItem, setSelectedItem] = useState(null);
   const BottomModalClose = () => {
        return {
            isVisible: isModalVisible,
            onClose: toggleModal,
            selectedItem: selectedItem,
        }
    }
    let navigation = useNavigation()
    const [likesCount, SetlikesCount] = useState(item.likes)
    const [isExpanded, setIsExpanded] = useState(false);
    const [imageLoaded, setImageLoaded] = useState(false);
    const ScreenWidth = Dimensions.get('window').width;
    const imageCache = useRef({});
    const [isLikesModalVisible, setIsLikesModalVisible] = useState(false);
     const [commentCount, setCommentCount] = useState(0);
    const [page, setPage] = useState(1);
    const [modalKey, setModalKey] = useState(0);


    const updateLikesCount = useCallback((action) => {
        SetlikesCount((prev) => (action === "like" ? prev + 1 : prev - 1));
    }, []);

    const toggleText = useCallback(() => {
        setIsExpanded((prev) => !prev);
    }, []);

    
    useEffect(() => {
        if (item?.comments) {
            setCommentCount(item.comments);
        }
    }, [item?.comments]);
    
    
    useEffect(() => {
        if (item.image && !item.imageHeight) {
            if (imageCache.current[item.image]) {
                item.imageHeight = imageCache.current[item.image];
            } else {
                Image.getSize(item.image, (width, height) => {
                    const newHeight = ScreenWidth / (width / height);
                    item.imageHeight = newHeight;
                    imageCache.current[item.image] = newHeight;
                });
            }
        }
    }, [item]);
    
    const handleCommentPress = () => {
        setModalKey(prev => prev + 1);
        SetIsModalVisibal(true);
        GetComments && GetComments();
    };
    
    const commentProps = {
        isModalVisible1,
        SetIsModalVisibal,
        item,
        onUpdateCommentCount: setCommentCount,
        timeAgo,
      };
      
    
    return (
        <View style={styles.postContainer}>
            <View style={styles.flexContainer}>
                <TouchableOpacity style={styles.userInfo} onPress={() => navigateToAccount(navigation, item?.profile?.hcc_id)}>
                    <View style={styles.profileImageContainer}>
                        <Avatar.Image size={40} source={{ uri: item.profile.profile_pic }} />
                    </View>
                    <View style={styles.userDetails}>
                        <Text style={styles.userName} numberOfLines={1}>
                            {item?.profile?.full_name}
                        </Text>
                        <Text style={styles.userDesignation} numberOfLines={1}>
                            {item?.profile?.hcc_id} - {item?.profile?.designation}
                        </Text>
                    </View>
                </TouchableOpacity>
                <View style={styles.actions}>
                    <Follow FollowId={item.profile.id} />
                    <Pressable onPress={() => {
                        toggleModal()
                        setSelectedItem(item)
                    }
                    }>
                        <Feather name="more-vertical" style={styles.moreIcon} size={30} color="#000" />
                    </Pressable>
                </View>
            </View>
            <View style={styles.imageContainer}>
                <Image
                    source={{ uri: item.image }}
                    style={[styles.postImage, { width: ScreenWidth, height: item.imageHeight }]}
                    onLoad={() => setImageLoaded(true)}
                />
            </View>
            <View style={styles.flexItem}>
                <View style={styles.postActions}>
                    <TouchableOpacity style={styles.flex}>
                        <Likes productId={item?.id} updateLikesCount={updateLikesCount} />
                        <TouchableOpacity onPress={() => { 
                        if (likesCount > 0) {
                            setIsLikesModalVisible(true);
                          }
                               }}>
                           <Text style={styles.count}>{likesCount}</Text>
                         </TouchableOpacity>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.flex} onPress={handleCommentPress} >
                        <Feather name="message-circle" style={styles.icon} size={25} />
                        <Text style={styles.count}>{commentCount}</Text>
                        </TouchableOpacity>
                    <TouchableOpacity style={styles.flex} onPress={() => shareContent(item, "", "link")}>
                        <Feather name="navigation" style={styles.icon} size={25} />
                    </TouchableOpacity>
                </View>
                {ManagerRoleAccess(frames_24) ? <Shortlist ShortlistId={item.profile.id} /> : null}
            </View>
            <View style={styles.footer}>
                <View style={styles.footerItem}>
                    <Text
                        style={styles.captionText}
                        numberOfLines={isExpanded ? null : 1}
                        ellipsizeMode="tail"
                    >
                        <Text style={styles.userName}>{item.profile.full_name}:</Text> {item?.caption}
                    </Text>
                    {item?.caption?.length > 100 && <TouchableOpacity onPress={toggleText}>
                        <Text style={styles.seeMoreText}>
                            {isExpanded ? 'See Less' : '...See More'}
                        </Text>
                    </TouchableOpacity>}
                </View>
                <TouchableOpacity onPress={handleCommentPress}>
                    <Text style={styles.captionText}>View all {commentCount} {item.comments === 1 ? "comment" : "comments"}</Text>
                </TouchableOpacity>
                <View><Text style={[styles.captionText, { fontSize: 10 }]}>{timeAgo(item?.created_at)}</Text></View>
            </View>
            <PostActions BottomModalClose={BottomModalClose} />
            <Comments key={modalKey} {...commentProps} />
            <LikesList isModalVisible1={isLikesModalVisible} SetIsModalVisibal={setIsLikesModalVisible} item={item}/>
        </View>
    );
};

export default React.memo(PostItem);