import React, { useState, useCallback, useEffect } from 'react';
import { View, Text } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { GiftedChat } from 'react-native-gifted-chat';

import * as chatActions from '../../store/actions/chat';

import socketIO from 'socket.io-client';
import ENV from '../../env';
import { Octicons } from '@expo/vector-icons'
import Colors from '../../constants/Colors';
import VerifiedUser from '../../constants/VerifiedUser';


let socket;

const ChatScreen = (props) => {
    const dispatch = useDispatch();
    const { route } = props;
    const user = route.params.user;
    const userId = user._id;
    const loggedUser = useSelector(state => state.auth.user);

    const chats = useSelector(state => state.chat.allChats);
    const currChats = chats.filter(c => (c.sender._id === loggedUser._id && c.reciever._id === userId) || (c.sender._id === userId && c.reciever._id === loggedUser._id))
    const resultChats = currChats.map(c => {
        return {
            _id: c._id,
            text: c.message,
            createdAt: new Date(c.time),
            user: {
                _id: c.sender._id,
                name: c.sender.name,
            }
        }
    }).reverse();

    const [text, setText] = useState('');
    const [messages, setMessages] = useState(resultChats);

    const sendPushNotification = async (userName, text) => {
        const message = {
            to: user.notificationToken,
            sound: 'default',
            title: `New message from ${userName}`,
            body: text,
            data: { data: 'goes here' },
            _displayInForeground: true,
        };
        const response = await fetch('https://exp.host/--/api/v2/push/send', {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Accept-encoding': 'gzip, deflate',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(message),
        });

        const res = await response.json();
        // console.log(res);
    };


    useEffect(() => {
        socket = socketIO.connect(ENV.apiUrl)
        socket.on('connect', () => {
            console.log('connected chat screen')
            socket.emit('userInfo', loggedUser);
        })
    }, [])

    useEffect(() => {
        socket.on('message', (newChat) => {
            console.log("New message");
            // if(newChat.sender._id !== loggedUser._id){
                //push notification
            // }

            if( newChat.sender._id === loggedUser._id || newChat.sender._id === userId ){
                let giftedNewChat = {
                    _id: newChat._id,
                    text: newChat.message,
                    createdAt: new Date(newChat.time),
                    user: {
                        _id: newChat.sender._id,
                        name: newChat.sender.name
                        // avatar: 
                    }
                }
                setMessages(previousMessages => GiftedChat.append(previousMessages, giftedNewChat) )
            }
            dispatch(chatActions.addChat(newChat))
        })
    }, [setMessages])

    const onSend = useCallback((messages = []) => {
        socket.emit('sendMessage', messages[0].text, loggedUser, user,  () => {

            console.log("NOTIFICATION PUSHING to", user.name)
            sendPushNotification(loggedUser.name, messages[0].text);
            setText('');
            // setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
        })
    }, [])

    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }} >
            <GiftedChat
                text={text}
                onInputTextChanged={text => setText(text)}
                messages={messages}
                onSend={messages => onSend(messages)}
                user={{
                    _id: loggedUser._id,
                }}
                // alwaysShowSend={true}
                // inverted={false}
            />
        </View>
    );
};


export const screenOptions = (navData) => {

    const routeParams = navData.route.params;
    return {
        
        headerTitle: () => (
            <Text
                style={{ color: "#fff", fontSize: 20, fontWeight: "600" }}
            >
                {routeParams.user.name + " "}
                {
                    VerifiedUser.verifiedUsersId.includes(routeParams.user._id) && <Octicons name="verified" size={18} color="#fff" />
                }
            </Text>
        )
    }
}

export default ChatScreen;