import React, { useEffect, useState, useCallback, useRef, useMemo, useContext } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import {
    StyleSheet, View, Text, Dimensions,
    TouchableOpacity, SearchBar, StatusBar,
    FlatList, Button,
    PlatformColor, Image, Icon,
    Platform, Keyboard,
    ImageBackground,
    InteractionManager,
    Pressable,
    KeyboardAvoidingView,
    PermissionsAndroid,
    LayoutAnimation,
    UIManager,
    SafeAreaView,
    TextInput,
    TouchableHighlight
} from "react-native";
import TrackPlayer from 'react-native-track-player';
import ViewOverflow from 'react-native-view-overflow'
import {SwipeButtonsContainer, SwipeProvider, SwipeItem} from '../../libraries/swipetoreply/swipeIndex';
import RNAndroidKeyboardAdjust from 'rn-android-keyboard-adjust'
import * as Animatable from 'react-native-animatable';
import * as ApiConstant from '../../network/ApiConstant'
import OverlayContainer from '../../customview/OverlayContainer'
import ContextMenu from "react-native-context-menu-view";
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import { DefaultNavigationBackButton } from '../../appcomponent/DefaultNavigationBackButton';
import { ThemeContext } from '../../context/ThemeContext';
import uuid from 'react-native-uuid'
import * as RootNavigation from '../../utils/navigation/RootNavigation';
import {
    GiftedChat, Bubble, Send, SendIcon, InputToolbar, Actions, Composer,
    Avatar, SystemMessage, Message, MessageImage, MessageText, Day, Time, utils,
    AccessoryBar, TypingIndicator
} from 'react-native-gifted-chat/';
import { useDebounce } from '../../appcomponent/debound';
import ImageModal from 'react-native-image-modal'
import { ActivityIndicator } from 'react-native-paper';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useKeyboard } from '@react-native-community/hooks'
import { ChatEmojiKeyboardInput } from '../../appcomponent/chatcomponent/ChatEmojiKeyboardInput';
import { ChatMoreKeyboardInput } from '../../appcomponent/chatcomponent/ChatMoreKeyboardInput';
import { ChatMultiImage } from '../../appcomponent/chatcomponent/ChatMultiImage';
import { ChatImage } from '../../appcomponent/chatcomponent/ChatImage';
import { ChatVideo } from '../../appcomponent/chatcomponent/ChatVideo';
import { ChatVoiceKeyboardInput } from '../../appcomponent/chatcomponent/ChatVoiceKeyboardInput';
import { Overlay } from 'react-native-elements';
import { ImageViewerContext } from '../../context/ImageViewerContext';
import { MentionInput } from '../../appcomponent/chatcomponent/MentionInput';
import FastImage from 'react-native-fast-image';
import { ChatSticker } from '../../appcomponent/chatcomponent/ChatSticker';
import { ChatVoice } from '../../appcomponent/chatcomponent/ChatVoice';
import { ChatReply } from '../../appcomponent/chatcomponent/ChatReply';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import CustomComposer from '../../customview/CustomComposer';
import { mentionRegEx, replaceMentionValues } from 'react-native-controlled-mentions';
import { ChatMentionView } from '../../appcomponent/chatcomponent/ChatMentionView';
import { useMentions } from 'react-native-controlled-mentions/'

const dimensions = Dimensions.get('window');
const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
const DefaultKeyboardHeight = 300
const KEYBOARD_SYSTEM = null
const KEYBOARD_EMOJI = 1
const KEYBOARD_MORE = 2
const KEYBOARD_VOICE = 3

var lastClickButtonTime = 0 //for avoid click multiply time into button continues
const CLICK_THRESHOLD = 700

const currentUser = {
    _id: 1,
    name: 'do dung',
    avatar: 'https://avatars.githubusercontent.com/u/8202437'
}

export default function ChatScreen({ navigation }) {
    const { theme } = React.useContext(ThemeContext)
    const { viewImages } = React.useContext(ImageViewerContext)
    const insets = useSafeAreaInsets()
    const keyboardHandler = useKeyboard()
    const inputRef = useRef()

    const [isLoadMore, setLoadMore] = React.useState(false)
    const [messages, setMessage] = React.useState([])
    const [replyMessage, setReplyMessage] = React.useState()
    const [text, setText] = useState('');
    const [isTyping, setIsTyping] = useState(false)
    const [isSwiping, setSwiping] = useState(false)
    const [customKeyboard, setCustomKeyboard] = useState(KEYBOARD_SYSTEM)


    const getKbHeight = (keyboardHandler.keyboardHeight == 0 ? DefaultKeyboardHeight
        : keyboardHandler.keyboardHeight) - insets.bottom

    const { textInputProps, triggers } = useMentions({
        value: text,
        onChange: setText,

        triggersConfig,
        patternsConfig,
    });

    useEffect(() => {
        UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
        navigation.setOptions({
            headerLeft: props => <DefaultNavigationBackButton navigation={navigation} />,
            headerTitle: props => <ChatHeader name={'Chat'} desc={'Online'} />,
            headerRight: props => <CallHeader {...props} />,
            headerStyle: {
                backgroundColor: theme.navBackground,
                borderBottomWidth: 1,
                borderBottomColor: '#E8E8E8',
            },
            headerTintColor: theme.navigationButton,
            headerTitleAlign: 'center',
            headerBackVisible: false
        })
        setMessage(messagesSample.sort((a, b) => b.createdAt - a.createdAt))
        requestPermission()
        return () => {
            TrackPlayer.stop()
            RNAndroidKeyboardAdjust.setAdjustResize()
        }
    }, [])

    useEffect(() => {
        if (keyboardHandler.keyboardShown) {
            if (customKeyboard != KEYBOARD_SYSTEM) {
                setCustomKeyboard(KEYBOARD_SYSTEM)
            }
        }
    }, [keyboardHandler.keyboardShown])

    const requestPermission = async () => {
        // await PermissionsAndroid.requestMultiple([
        //     PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        // ]);
    };

    const hideReplyView = () => {
        setReplyMessage()
    }

    const handleLoadMore = () => {
        setLoadMore(true)
        console.log('handleLoadMore')
        setMessage(prev => GiftedChat.prepend(prev, loadMoreSample))
    }

    const onSend = React.useCallback((messages = []) => {
        hideReplyView()
        appendMessage(messages)
    })

    const onSelectEmoji = React.useCallback((emoji) => {
        const message = [{
            _id: uuid.v4(),
            user: currentUser,
            createdAt: new Date(),
            sticker: ApiConstant.MAIN_SERVER + emoji.Data,
        }]
        appendMessage(message)
    })

    const onSendVoice = React.useCallback((voiceUrl) => {
        const message = [{
            _id: uuid.v4(),
            user: currentUser,
            createdAt: new Date(),
            voice: voiceUrl,
        }]
        appendMessage(message)
    })

    const onReply = React.useCallback((message) => {
        appendMessage(message)
    })

    const appendMessage = (message) => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        setMessage(prev => GiftedChat.append(prev, message))
        if (message[0].user._id == currentUser._id) {
            inputRef.current.scrollToBottom()
        }
    }

    const renderUserName = (props) => {
        const { user = {} } = props.currentMessage
        const { user: pUser = {} } = props.previousMessage
        const isSameUser = pUser._id === user._id
        const isSelf = user._id === 1
        const isSameDate = utils.isSameDay(props.currentMessage, props.previousMessage)
        const shouldNotRenderName = (isSameUser && isSameDate) || isSelf
        return shouldNotRenderName ? (
            <View />
        ) : (
            <Text
                style={{
                    marginBottom: 4,
                    color: theme.defaultText,
                    fontSize: 12
                }}>
                {user.name}
            </Text>
        )
    }

    const renderBubble = (props) => {
        return (
            <View>
                {renderUserName(props)}
                {/* <Animatable.View animation="slideInUp" duration={200} easing='ease-in-out'> */}
                    <ContextMenu
                        // preview={<View style={{ width: 100, height: 100, backgroundColor: 'green'}} />}
                        style={{
                            backgroundColor: 'transparent'
                        }}
                        previewBackgroundColor='transparent'
                        actions={[
                            { title: 'Pin', systemIcon: 'pin' },
                            { title: 'Edit', systemIcon: 'pencil' },
                            {
                                title: 'Delete',
                                destructive: true,
                                inlineChildren: true,
                                systemIcon: 'trash',
                            },
                        ]}
                        onCancel={() => {
                        }}
                        onPress={(e) => {
                            if (e.nativeEvent.index == 0) {
                                setReplyMessage(props.currentMessage)
                                inputRef.current.textInput.focus()
                            } else if (e.nativeEvent.index == 2) {
                                setMessage(prevMessage => prevMessage.filter(mes => mes._id != props.currentMessage._id))
                            }
                        }}>

                        {props.currentMessage.text ? <Bubble
                            {...props}
                            containerStyle={{
                                left: {
                                    backgroundColor: 'transparent',
                                    marginRight: 60,
                                },
                                right: {
                                    backgroundColor: 'transparent',
                                    marginLeft: 60
                                }
                            }}
                            wrapperStyle={{
                                left: {
                                    borderRadius: 8,
                                    backgroundColor: theme.leftChatBubbleBg,
                                    marginRight: 0,
                                },
                                right: {
                                    borderRadius: 8,
                                    backgroundColor: theme.rightChatBubbleBg,
                                    marginLeft: 0
                                },
                            }}
                            textStyle={{
                                left: {
                                    color: 'black',
                                    padding: 4
                                },
                                right: {
                                    color: theme.rightChatBubbleText,
                                    padding: 4
                                },
                            }}
                        /> : null}

                        {renderMultiImageView(props)}
                        {renderImageView(props)}
                        {renderVideoView(props)}
                        {renderSticker(props)}
                        {renderVoice(props)}
                    </ContextMenu>
                {/* </Animatable.View> */}
            </View>
        )
    }

    const renderAvatar = (props) => {
        const { user = {} } = props.currentMessage
        const { user: pUser = {} } = props.previousMessage
        const isSameUser = pUser._id === user._id
        const isSelf = user._id === 1
        const isSameDate = utils.isSameDay(props.currentMessage, props.previousMessage)
        const shouldNotRenderName = (isSameUser && isSameDate) || isSelf
        if (shouldNotRenderName) return <View />
        return (
            <Avatar
                {...props}
                containerStyle={{
                    left: {
                        marginTop: 19,
                        marginRight: 0,
                    }
                }}
                imageStyle={{
                    left: {
                        backgroundColor: 'lightgray',
                    }
                }}
            />
        );
    }

    const renderInputToolbar = (props) => {
        return <InputToolbar
            {...props}
            containerStyle={{
                alignContent: 'center',
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: theme.navBackground,
            }}
            placeholder='Message...'
        />
    }

    const renderComposer = (props) => {
        return <>
            <CustomComposer
                {...props}
                containerStyle={{
                    justifyContent: 'center',
                    alignContent: 'center'
                }}
                textInputMentionProps={textInputProps}
                textInputStyle={{
                    backgroundColor: theme.chatInputTextBg,
                    borderRadius: 10,
                    paddingTop: 10,
                    paddingLeft: 10,
                    paddingRight: 40,
                    fontSize: 16,
                    marginLeft: 12,
                    marginRight: 15,
                }} />
            <Actions
                {...props}
                containerStyle={{
                    position: 'absolute',
                    right: 60,
                    alignSelf: 'center'
                }}
                icon={() => <MaterialCommunityIcons
                    size={25}
                    color={theme.chatSendBtn}
                    name={customKeyboard == KEYBOARD_EMOJI ? 'keyboard' : 'emoticon-happy'} />}
                onPressActionButton={() => {
                    handleChangeKeyboardType(KEYBOARD_EMOJI)
                }} />
        </>
    }

    const renderActions = (props) => {
        if(props.text.length > 0) return <View/>
        return <Actions
            {...props}
            icon={() => <MaterialIcons
                size={25}
                style={{
                    alignSelf: 'center',
                    alignItems: 'center',
                    justifyContent: 'center',
                    alignContent: 'center'
                }}
                color={theme.chatSendBtn}
                name={'more-horiz'} />}
            onPressActionButton={() => {
                handleChangeKeyboardType(KEYBOARD_MORE)
            }}/>
    }

    const renderReplyButton = (
        <SwipeButtonsContainer
            style={{
                alignSelf: 'center',
                alignContent: 'center',
                justifyContent: 'center',
                // aspectRatio: 1,
                flex: 1,
                flexDirection: 'row',
                paddingRight: 20
                // padding: 10,
            }}>
            <Animatable.View
                animation='bounceInUp'>
                <MaterialCommunityIcons size={28} name={'reply-circle'} color={theme.mainBlue} />
            </Animatable.View>
        </SwipeButtonsContainer>
    );

    const renderMessage = (props) => {
            return props.currentMessage.system ?
                <Message
                    {...props} />
                :
                <SwipeItem
                    disableSwipeIfNoButton
                    onSwipeInitial={() => {
                        setSwiping(true)
                    }}
                    onMovedToOrigin={isReply => {
                        setSwiping(false)
                        if (isReply) {
                            setReplyMessage(props.currentMessage)
                            inputRef.current.textInput.focus()
                        }
                    }}
                    rightButtons={renderReplyButton}
                    style={{
                        flex: 1,
                    }}>
                    <Message
                        {...props} />
                </SwipeItem>
    }

    const renderSendBtn = props => {
        return (
            <Send {...props}
                containerStyle={{
                    justifyContent: 'center',
                    alignSelf: 'center',
                    marginRight: 12
                }}>

                {!props.text ?
                    <TouchableOpacity
                        onPress={() => {
                            handleChangeKeyboardType(KEYBOARD_VOICE)
                        }}>
                        <MaterialCommunityIcons
                            size={25}
                            style={{
                                marginTop: 2
                            }}
                            color={theme.chatSendBtn}
                            name={'microphone'} />
                    </TouchableOpacity> :

                    <MaterialCommunityIcons
                        size={25}
                        style={{
                            marginTop: 2
                        }}
                        color={theme.chatSendBtn}
                        name={'send'} />}

            </Send>
        );
    }

    const renderLoadEarlier = (props) => {
        if (isLoadMore) {
            return <ActivityIndicator {...props} style={{ margin: 10 }} />
        }
        return null
    }

    const renderSystemMessage = props => {
        return (
            <SystemMessage
                {...props}
                containerStyle={{
                    marginBottom: 15,
                }}
                textStyle={{
                    fontStyle: 'italic',
                    fontSize: 12,
                    color: 'gray'
                }}
            />
        );
    }

    const renderMessageText = props => {
        return (
            <MessageText
                {...props}
            />
        );
    }

    const renderCustomView = (props) => {
        // if(props.currentMessage.images){
        //     renderMultiImageView()
        // }
        return null
    };

    const renderMultiImageView = (props) => {
        if (props.currentMessage.images) {
            return <ChatMultiImage {...props} />
        }
        return null
    }

    const renderVideoView = (props) => {
        if (props.currentMessage.video) {
            return <ChatVideo {...props} />
        }
        return null
    }

    const renderImageView = (props) => {
        if (props.currentMessage.image) {
            return <ChatImage {...props} />
        }
        return null
    }

    const renderVoice = (props) => {
        if (props.currentMessage.voice) {
            return <ChatVoice {...props} />
        }
        return null
    }

    const renderSticker = (props) => {
        if (props.currentMessage.sticker) {
            return <ChatSticker {...props} />
        }
        return null
    }

    const renderChatEmpty = () => {
        return <View
            style={{
                transform: [{ scaleY: -1 }],
                flex: 1,
                color: 'gray',
                fontStyle: 'italic',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
            <Text style={{
                color: 'gray',
                fontStyle: 'italic'
            }}>No messages yet</Text>
        </View>
    }

    const renderTime = (props) => {
        // console.log(props.currentMessage.text)
        if (!props.currentMessage.text) { return null }
        if (utils.isSameUser(props.currentMessage, props.nextMessage)
         && utils.isSameDay(props.currentMessage, props.nextMessage)) {
            return null
        }
        return <Time
            {...props}
            timeTextStyle={{
                left: {
                    color: 'darkgray',
                    paddingLeft: 4,
                    textAlign: 'left',
                },
                right: {
                }
            }} />
    }

    const renderFooter = (props) => {
        return <View>
            <TypingIndicator isTyping={isTyping} />
        </View>
    }

    const renderChatFooter = (props) => {
        return <>
            <ChatMentionView suggestions={users} {...triggers.mention} />
            {replyMessage ? <ChatReply {...props} message={replyMessage} hideReplyView={hideReplyView} /> : null}
        </>
    }

    const renderAccessory = (props) => {
        if (customKeyboard == KEYBOARD_EMOJI) return <ChatEmojiKeyboardInput width={dimensions.width} height={getKbHeight} onSelectEmoji={onSelectEmoji} />
        if (customKeyboard == KEYBOARD_MORE) return <ChatMoreKeyboardInput width={dimensions.width} height={getKbHeight} />
        if (customKeyboard == KEYBOARD_VOICE) return <ChatVoiceKeyboardInput width={dimensions.width} height={getKbHeight} onSendVoice={onSendVoice} />
        return null
    }

    const renderScrollToBottom = (props) => {
        return <MaterialCommunityIcons name={'arrow-down'} size={20} color={'white'} />
    }

    const handleChangeKeyboardType = (newKeyboardType) => {
        if(new Date().getTime() - lastClickButtonTime < CLICK_THRESHOLD) {
            return
         }
        if (customKeyboard == KEYBOARD_SYSTEM) {
            // RNAndroidKeyboardAdjust.setAdjustNothing()
            setCustomKeyboard(newKeyboardType)
            if (keyboardHandler.keyboardShown) {
                try { Keyboard.dismiss() } catch (error) { console.log(error) }
            } else {
                //force android show when click button + keboard not show
                if (Platform.OS == 'android') {
                    // inputRef.current.setMinInputToolbarHeight(getKbHeight)
                }
            }
            //ios always modify container height
            // if(Platform.OS == 'ios'){
            inputRef.current.setMinInputToolbarHeight(getKbHeight)
            // RNAndroidKeyboardAdjust.setAdjustResize()
            // }
            inputRef.current.scrollToBottom()
            setTimeout(() => {
                // RNAndroidKeyboardAdjust.setAdjustResize()
            }, 800);

        } else {
            if (customKeyboard == newKeyboardType) {
                // RNAndroidKeyboardAdjust.setAdjustNothing()
                if (!keyboardHandler.keyboardShown) {
                    try { inputRef.current.textInput.focus() } catch (error) { console.log(error) }
                    // if(Platform.OS == 'android'){
                    //     inputRef.current.setMinInputToolbarHeight(getKbHeight)
                    // }
                } else {
                    // inputRef.current.setMinInputToolbarHeight(0)
                }
                setTimeout(() => {
                    setCustomKeyboard(KEYBOARD_SYSTEM)
                }, 50);

            } else {
                // RNAndroidKeyboardAdjust.setAdjustResize()
                setCustomKeyboard(newKeyboardType)
            }
        }
        lastClickButtonTime = new Date().getTime()
    }

    return (
        <ImageBackground
            // source={require('../../assets/link_light.png')}
            style={{
                flex: 1,
                backgroundColor: theme.navBackground,
            }}>

            <GiftedChat
                text={text}
                onInputTextChanged={setText}
                ref={inputRef}
                bottomOffset={insets.bottom}
                renderBubble={renderBubble}
                renderLoading={() => <ActivityIndicator size="small" color="#0000ff" />}
                renderInputToolbar={renderInputToolbar}
                renderComposer={renderComposer}
                timeFormat='LT'
                locale='vi'
                dateFormat='DD/MM/YYYY'
                renderSend={renderSendBtn}
                renderAvatar={renderAvatar}
                renderActions={renderActions}
                renderMessage={renderMessage}
                renderMessageText={renderMessageText}
                renderSystemMessage={renderSystemMessage}
                renderChatEmpty={renderChatEmpty}
                renderTime={renderTime}
                renderAccessory={renderAccessory}
                accessoryStyle={{ height: customKeyboard != KEYBOARD_SYSTEM ? getKbHeight : 0 }}
                // minInputToolbarHeight={ customKeyboard != KEYBOARD_SYSTEM ? getKbHeight : 44 }
                renderChatFooter={renderChatFooter}
                renderCustomView={renderCustomView}
                renderMessageVideo={() => { }}
                messagesContainerStyle={{
                    backgroundColor: theme.background
                }}
                parsePatterns={(linkStyle) => [
                    {
                        pattern: /#(\w+)/,
                        style: linkStyle,
                        onPress: (tag) => console.log(`Pressed on hashtag: ${tag}`),
                    },
                    {
                      pattern: mentionRegEx,
                      style: {fontWeight: 'bold', color: theme.mainOrangeColor},
                      renderText: (value) => replaceMentionValues(value, ({name}) => `@${name}`),
                      onPress: (value) => alert(`clicked: ${value}`)
                    },
                ]}
                extraData={{ replyMessage, isLoadMore, customKeyboard, isSwiping}}
                isTyping={isTyping}
                messages={messages}
                onSend={messages => onSend(messages)}
                onLongPress={() => { }}
                onPressAvatar={() => {
                    setIsTyping(!isTyping)
                }}
                listViewProps={{
                    contentContainerStyle: { flexGrow: 1, justifyContent: "flex-end" },
                    keyboardDismissMode: 'on-drag',
                    nestedScrollEnabled: true,
                    scrollEnabled: !isSwiping,
                    // initialNumToRender: 15,
                    showsVerticalScrollIndicator: true
                }}
                maxInputLength={500}
                textInputProps={{
                    keyboardAppearance: theme.keyboard,
                    autoCorrect: false,
                    autoCapitalize: 'none',
                    autoGrow: true,
                }}
                shouldUpdateMessage={() => {
                    return true;
                }}
                maxComposerHeight={100}
                disableComposer={false}
                user={currentUser}
                // showAvatarForEveryMessage
                isCustomViewBottom
                inverted
                infiniteScroll
                // alignTop
                alwaysShowSend
                scrollToBottom
                scrollToBottomComponent={renderScrollToBottom}
                scrollToBottomStyle={{
                    backgroundColor: theme.mainOrangeColor,
                    bottom: 22
                }}
                onLoadEarlier={handleLoadMore}
                // loadEarlier={true}
                // isLoadingEarlier={isLoadMore}
                renderLoadEarlier={renderLoadEarlier}
                // showUserAvatar
                renderAvatarOnTop
                renderUsernameOnMessage={false}
                // forceGetKeyboardHeight={customKeyboard != KEYBOARD_SYSTEM}
                // wrapInSafeArea={Platform.OS === 'android'}
                keyboardShouldPersistTaps={'handled'}
                isKeyboardInternallyHandled={customKeyboard == KEYBOARD_SYSTEM || !keyboardHandler.keyboardShown}
            // isKeyboardInternallyHandled={false}
            />
        </ImageBackground>
    )
}


const ChatHeader = (props) => {
    const { theme } = React.useContext(ThemeContext)

    return (
        <TouchableOpacity style={{
        }} onPress={() => {
            // RootNavigation.push("Setting")
        }}>
            <View style={{
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <Text
                    numberOfLines={1}
                    ellipsizeMode='tail'
                    style={{
                        maxWidth: 120,
                        fontSize: 17,
                        fontWeight: '700',
                        color: theme.defaultText
                    }}>{props.name}</Text>
                {/* <LinearGradient colors={['transparent']}> */}
                <Text
                    numberOfLines={1}
                    ellipsizeMode='tail'
                    style={{
                        marginTop: 2,
                        maxWidth: 120,
                        fontSize: 11,
                        fontWeight: '600',
                        color: 'gray'
                    }}>{props.desc}</Text>
                {/* </LinearGradient> */}
            </View>
        </TouchableOpacity>
    )
}

const CallHeader = (props) => {
    const { theme } = React.useContext(ThemeContext)
    return (
        <View style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <TouchableOpacity onPress={() => {
            }}>
                <MaterialIcons name='phone-forwarded' color={theme.navigationButton} size={24} style={{ marginRight: 24 }} />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {
                RootNavigation.navigate('GroupCall')
            }}>
                <MaterialIcons name='videocam' color={theme.navigationButton} size={28} style={{ marginBottom: 3 }} />
            </TouchableOpacity>

        </View>

    )
}

const messagesSample = [
    {
        _id: 'fap',
        createdAt: new Date(new Date().getTime()  - 1000),
        user: {
            _id: 2,
            name: 'React dsad',
        },
        voice: 'https://www.chosic.com/wp-content/uploads/2021/07/The-Epic-Hero-Epic-Cinematic-Keys-of-Moon-Music.mp3'
    },
    {
        _id: 'fap1',
        createdAt: new Date(),
        user: currentUser,
        // text:  'nhu cac'
        voice: 'https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3'
    },
    {
        _id: 2,
        text: 'Hello developer 2',
        sent: true,
        createdAt: new Date(Date.UTC(2016, 5, 12, 17, 20, 0)),
        user: {
            _id: 2,
            name: 'React dsad',
        },
    },
    {
        _id: 3,
        // text: 'Hi! ',
        createdAt: new Date(Date.UTC(2011, 2, 13, 17, 20, 0)),
        sent: true,
        received: true,
        peding: true,
        user: {
            _id: 1,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
        },
        image: 'https://picsum.photos/id/33/900/900'
    },
    {
        _id: 4,
        text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
        createdAt: new Date(Date.UTC(2016, 5, 14, 17, 20, 0)),
        user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
        }
    },
    {
        _id: 5,
        text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
        createdAt: new Date(Date.UTC(2016, 5, 15, 17, 20, 0)),
        user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
        }
    },
    {
        _id: 6,
        text: 'Come on!',
        createdAt: new Date(Date.UTC(2016, 5, 16, 18, 22, 0)),
        user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
        },
    },
    {
        _id: 7,
        text: 'Come on!13',
        createdAt: new Date(Date.UTC(2016, 5, 16, 18, 23, 0)),
        pending: true,
        user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
        },
    },
    {
        _id: 8,
        // text: 'cac',
        createdAt: new Date(Date.UTC(2016, 5, 16, 18, 25, 0)),
        user: {
            _id: 5,
            name: 'dmm',
            avatar: 'https://placeimg.com/140/140/any',
        },
        images: ['https://picsum.photos/id/1/900/900','https://picsum.photos/id/2/900/900','https://picsum.photos/id/3/900/900'],
    },
    {
        _id: 9,
        // text: '',
        createdAt: new Date(Date.UTC(2016, 5, 18, 19, 20, 0)),
        // image : 'https://placeimg.com/140/140/any',
        video: {
            uri: 'https://file-examples.com/storage/feb8f98f1d627c0dc94b8cf/2017/04/file_example_MP4_1920_18MG.mp4',
            thumbnail: 'https://picsum.photos/id/237/900/900'
        },
        // images: ['https://placeimg.com/700/540/any', 'https://placeimg.com/960/540/any', 'https://placeimg.com/800/540/any'],
        sent: true,
        user: {
            _id: 6,
            name: 'React fap',
            avatar: 'https://placeimg.com/140/140/any',
        },
    },
    {
        _id: 11,
        // text: 'Hi! ',
        createdAt: new Date(Date.UTC(2016, 5, 20, 17, 20, 0)),
        sent: true,
        received: true,
        peding: true,
        user: {
            _id: 1,
            name: 'React Native',
            avatar: 'https://placeimg.com/333/855/any',
        },
        // image: 'https://placeimg.com/700/540/any',
        // sticker: 'https://link.vedax.ai/images/emotions/cat_petition_hs.png'

        text: 'Hello @[David Tabaka](3r2r32) #cac'
    },
];

const loadMoreSample = [
    {
        _id: 2,
        text: 'fap1',
        sent: true,
        createdAt: new Date(Date.UTC(2016, 4, 12, 17, 20, 0)),
        user: {
            _id: 2,
            name: 'React dsad',
        },
    },
    {
        _id: 3,
        // text: 'Hi! ',
        createdAt: new Date(Date.UTC(2016, 3, 13, 17, 20, 0)),
        sent: true,
        received: true,
        peding: true,
        user: {
            _id: 8,
            name: 'fap2',
            avatar: 'https://placeimg.com/140/140/any',
        },
        image: 'https://placeimg.com/140/140/any'
    },
    {
        _id: 4,
        text: 'Cac dmm',
        createdAt: new Date(Date.UTC(2016, 2, 14, 17, 20, 0)),
        user: {
            _id: 3,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
        }
    },
]

const users = [
    {
        id: '1',
        name: 'David Tabaka',
        avatar: 'https://placeimg.com/140/140/any',
    },
    {
        id: '2',
        name: 'Mary',
        avatar: 'https://placeimg.com/140/140/any',
    },
    {
        id: '3',
        name: 'Tony',
        avatar: 'https://placeimg.com/140/140/any',
    },
    {
        id: '4',
        name: 'Mike',
        avatar: 'https://placeimg.com/140/140/any',
    },
    {
        id: '5',
        name: 'Grey',
        avatar: 'https://placeimg.com/140/140/any',
    },
];

const hashtags = [
    {
        id: 'todo',
        name: 'todo',
    },
    {
        id: 'help',
        name: 'help',
    },
    {
        id: 'loveyou',
        name: 'loveyou',
    },
];

// Config of suggestible triggers
const triggersConfig = {
    mention: {
        trigger: '@',
    },
    hashtag: {
        trigger: '#',
        textStyle: {
            fontWeight: 'bold',
            color: 'grey',
        },
    },
};

// Config of highlightable patterns (like links, bold, italic text etc.)
const patternsConfig = {
    url: {
        pattern: /a/gi,
        textStyle: { color: 'blue' },
    },
};