import { Image, StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import AntIcon from 'react-native-vector-icons/AntDesign'
import LineIcon from 'react-native-vector-icons/SimpleLineIcons'
import { Menu, Provider } from 'react-native-paper'
import colors from '../../../constants/colors'
import fonts from '../../../constants/fonts'
import ButtonWrapper from '../../atoms/Buttons/ButtonWrapper'
import { getTimestamp } from '../../../constants/functions'
import images from '../../../assets/images/images'
import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'


const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeCount, }) => {

    // * Like Counter
    const [isDisliked, setDisliked] = useState(false)
    const [isLiked, setLiked] = useState(false)
    const [likeCounter, setLikeCounter] = useState(likeCount ?? 123)
    const [dislikeCounter, setDislikeCounter] = useState(dislikeCount ?? 452)

    // * Menu Visibility
    const [optionsMenuVisible, setOptionsMenuVisible] = React.useState(false);
    const openOptionsMenu = () => setOptionsMenuVisible(true);
    const closeOptionsMenu = () => setOptionsMenuVisible(false);
    const toggleOptionsMenu = () => setOptionsMenuVisible(!optionsMenuVisible)

    const [optionsMenuAnchor, setOptionsMenuAnchor] = React.useState({ y: 0, x: 0 })
    const onOptionsMenuPress = (event) => {
        const { nativeEvent } = event;
        console.log(nativeEvent)
        const anchor = {
            x: nativeEvent.locationX,
            y: nativeEvent.locationY,
            // x:0,
            // y:0
        };

        setOptionsMenuAnchor(anchor);
        toggleOptionsMenu()
    }


    const handleToggleDislike = () => {
        setDisliked(!isDisliked)
        setDislikeCounter(isDisliked === true ? dislikeCounter - 1 : dislikeCounter + 1)
    }

    const handleToggleLike = () => {
        setLiked(!isLiked)
        setLikeCounter(isLiked === true ? likeCounter - 1 : likeCounter + 1)
    }

    const styles = StyleSheet.create({
        header: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        commentContainer: {
            width: '100%',
            height: 150,
            // height: 'auto',
            paddingVertical: verticalScale(4)
        },
        profileIcon: {
            height: 42,
            width: 42,
            borderRadius: 42,
            marginRight: horizontalScale(8),

        },
        buttonStyle: {
            alignItems: 'center',
            justifyContent: 'center',
            height: 'auto',
            width: 'auto'
        },
        icon: {
            color: colors().primaryColor,
            fontSize: moderateScale(16)
        },
        name: {
            fontFamily: fonts.type.regular,
            color: colors().recessive,
            fontSize: moderateScale(12)
        },
        timestamp: {
            fontFamily: fonts.type.regular,
            color: colors().gray,
            fontSize: moderateScale(9)
        },
        replyIcon: {
            height: 22,
            width: 22,
            borderColor: colors().recessive,
            borderWidth: 1,
            borderRadius: 24,
            marginRight: -8
        },
        utilContainer: {
            flexDirection: 'row',
            gap: 12
        },
        utilButtons: {
            flexDirection: 'row',
            alignItems: 'baseline'
        },
        utilText: {
            fontFamily: fonts.type.medium,
            color: colors().recessive,
            paddingRight: 4
        },

    })



    return (
        <Provider>
            <View style={styles.commentContainer}>

                <View style={styles.header}>
                    <View style={{ flexDirection: 'row' }}>
                        <Image source={images.imageCard} style={styles.profileIcon} />
                        <View style={{ justifyContent: 'center' }}>
                            <Text style={styles.name}>Semina Gurung</Text>
                            <Text style={styles.timestamp}>{getTimestamp(timestamp)}</Text>
                        </View>
                    </View>
                    <View>
                        <Menu
                            visible={optionsMenuVisible}
                            onDismiss={closeOptionsMenu}
                            anchor={<ButtonWrapper onPress={onOptionsMenuPress} buttonStyle={styles.buttonStyle}>
                                <LineIcon name='options-vertical' color={styles.icon.color} size={styles.icon.fontSize} />
                            </ButtonWrapper>}
                        >
                            <Menu.Item onPress={() => { }} title="Item 1" />
                            <Menu.Item onPress={() => { }} title="Item 2" />
                            <Menu.Item onPress={() => { }} title="Item 3" />
                        </Menu>

                    </View>

                </View>

                <Text style={{ paddingVertical: fonts.getSize(13), fontFamily: fonts.type.regular, fontSize: fonts.getSize(11) }}>
                    Lorem Ip sum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply du
                </Text>
                <View style={styles.header}>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <View style={{ flexDirection: 'row', paddingRight: fonts.getSize(16) }}>
                            <Image source={images.imageCard} style={styles.replyIcon} />
                            <Image source={images.imageCard} style={styles.replyIcon} />
                            <Image source={images.imageCard} style={styles.replyIcon} />
                        </View>
                        <Text style={styles.utilText}>View 14 replies</Text>
                    </View>
                    <View style={styles.utilContainer}>
                        <ButtonWrapper
                            buttonStyle={styles.utilButtons}
                            onPress={() => {
                                handleToggleLike()
                            }}
                        >
                            <Text style={styles.utilText}>{`${likeCounter}`}</Text>
                            <AntIcon name={isLiked ? "like1" : "like2"} color={styles.icon.color} size={16} />
                        </ButtonWrapper>
                        <ButtonWrapper
                            buttonStyle={styles.utilButtons}
                            onPress={() => {
                                handleToggleDislike()
                            }}
                        >
                            <Text style={styles.utilText}>{`${dislikeCounter}`}</Text>
                            <AntIcon name={isDisliked ? "dislike1" : "dislike2"} color={styles.icon.color} size={16} />
                        </ButtonWrapper>
                    </View>
                </View>
            </View>
        </Provider>
    )
}

export default CommentCard

