import { StatusBar } from 'expo-status-bar';
import React, { useState, useRef, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider as PaperProvider, DefaultTheme, Appbar, Button, Text } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Login from "./Views/Login.js"
import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js"
import Search from './Views/Search.js';
import Groups from './Views/Groups.js';
import Courses from './Views/Courses.js';
import NotificationsView from './Views/NotificationsView.js';
import SinglePost from './Views/SinglePost.js'
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import API from './API.js';
import i18n from "./i18nMessages.js";
import NewPostView from './Views/NewPost.js';
import { TouchableOpacity, View, Image, KeyboardAvoidingView } from 'react-native';
import MenuView from './Views/Menu.js';
import ProfileSettings from './Views/ProfileSettings.js';
import InviteView from './Views/Invite.js';
import MediaView from './components/MediaView.js';
import { useSnapshot } from 'valtio';
import GlobalState from './contexts/GlobalState.js';
import NewGroup from './Views/NewGroup.js';
import * as Linking2 from 'expo-linking';

import { Linking } from 'expo';

const handleDeepLink = (url) => {
  // Handle the deep linking URL here
  alert('Deep link:', url);
}

const checkDeepLinking = async () => {
  // Check if the app was opened by a deep linking URL
  const initialUrl = await Linking.getInitialURL();
  if (initialUrl) {
    handleDeepLink(initialUrl);
  }

  // Add an event listener to handle deep linking URLs
  Linking.addEventListener('url', (event) => {
    handleDeepLink(event.url);
  });
}


const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
        ...DefaultTheme.colors,
        primary: '#000000',
        accent: '#0d6efd',
        background: "#edf2f7",
    },
};

Notifications.setNotificationHandler({
    handleNotification: async () => {
        //console.log("notif background");
        return {
            shouldShowAlert: true,
            shouldPlaySound: true,
            shouldSetBadge: true,
        };
    },
});

async function registerForPushNotificationsAsync() {

    if (Platform.OS === 'android') {
        Notifications.setNotificationChannelAsync('default', {
            name: 'default',
            importance: Notifications.AndroidImportance.MAX,
            vibrationPattern: [0, 250, 250, 250],
            lightColor: '#FF231F7C',
        });
    }

    let token;
    if (Device.isDevice) {
        const { status: existingStatus } = await Notifications.getPermissionsAsync();
        let finalStatus = existingStatus;
        if (existingStatus !== 'granted') {
            const { status } = await Notifications.requestPermissionsAsync();
            finalStatus = status;
        }
        if (finalStatus !== 'granted') {
            //alert('Failed to get push token for push notification!');
            return;
        }
        token = (await Notifications.getExpoPushTokenAsync({ projectId: "c2bb4d4e-4d4d-4f34-a873-7cad78c6023c", })).data;
    } else {
        //alert('Must use physical device for Push Notifications');
    }
    return token;
}



const MainNavigation = ({route}) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    const [expoPushToken, setExpoPushToken] = useState('');
    const [notification, setNotification] = useState(false);
    const notificationListener = useRef();
    const responseListener = useRef();
    const url = Linking2.useURL();
    useEffect(() => {
        // Do something with url
        alert(url);
    }, [url]);

    useEffect(() => {
        registerForPushNotificationsAsync().then(async (token) => {
            let isLoggedIn = await API.isLoggedIn();
            if (!isLoggedIn) return false;
            API.registerToken(token);
            return setExpoPushToken(token);
        });
        checkDeepLinking();

        // This listener is fired whenever a notification is received while the app is foregrounded
        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
            //console.log("got notif", notification)
            setNotification(notification);
        });

        // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
            //console.log("got notif click", notification)
            console.log(response);
        });

        const interval = setInterval(async () => {
            if(await API.isLoggedIn()){
                let me = await API.getMe();
                //console.log(JSON.stringify(viewer), JSON.stringify(me))
                if(JSON.stringify(viewer) !== JSON.stringify(me)){
                    console.log("Updating me")
                    GlobalState.me = me;
                }
            }
        }, 30000);

        return () => {
            Notifications.removeNotificationSubscription(notificationListener.current);
            Notifications.removeNotificationSubscription(responseListener.current);
            clearInterval(interval);
        };
    }, []);


    return (
        <>
        <Tab.Navigator initialRouteName="Home"
            activeColor="#0d6efd"
            inactiveColor="#FFFFFF"
        >
            <Tab.Screen
                name="Feed"
                component={Feed}
                options={{
                    tabBarLabel: i18n.t("message.feed"),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="home" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: e => {
                        navigation.navigate('Feed', {reRender: Math.random()});
                    },
                })}

            />
            <Tab.Screen
                name="Groups"
                component={Groups}
                options={{
                    tabBarLabel: i18n.t('message.groups'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="groups" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="NewPost"
                component={NewPostView}
                options={{
                    tabBarLabel: '',//i18n.t('message.statusUpdate'),
                    tabBarIcon: ({ color, route }) => (
                        <MaterialIcons name={true !== "NewPost" ? "add" : "send"} color="#fff" size={26} />
                    ),
                    tabBarButton: (props) => (
                        <TouchableOpacity 
                            onPress={props.onPress}
                            style={{
                                top: -17,
                                justifyContent: 'center',
                                alignItems: 'center',
                                
                            }} 
                        >
                           <View style={{
                            height: 56,
                            width: 56,
                            borderRadius: 28,
                            backgroundColor: "#c44d56",
                            paddingTop: 13
                           }}>{props.children}</View>
                        </TouchableOpacity>
                    ),
                    header: () => { <></> },
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: e => {
                        //console.log("listener", route)
                        if(route.name !== "NewPost"){
                            // Target current profile if one in route
                            navigation.navigate('NewPost', {toProfile: route.params?.profileid});
                        } else {
                            //Send function on child 
                            navigation.navigate('NewPost', {toProfile: route.params?.profileid, sendNow: true});
                        }
                    },
                })}
            />
            <Tab.Screen
                name="Courses"
                component={Courses}
                options={{
                    tabBarLabel: i18n.t('message.courses'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="subscriptions" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />
            <Tab.Screen
                name="MyProfile"
                component={Profile}
                options={{
                    tabBarLabel: viewer.profile?.firstName,
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="person" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: e => {
                        navigation.navigate('MyProfile', {profileid: viewer._id});
                    },
                })}
            />
            {/*
            <Tab.Screen
                name="Logout"
                component={Login}
                options={{
                    tabBarLabel: i18n.t('message.logout'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="logout" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />*/}
            
        </Tab.Navigator>
        </>
    )
}

export default function App() {
    return (
        <PaperProvider settings={{
            icon: props => <MaterialIcons {...props} />,
        }} theme={theme}>
            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}>
            <NavigationContainer>
                <StatusBar style="dark" />
                <Stack.Navigator screenOptions={{
                    header: (props) => {
                        return (
                            <Appbar.Header style={{backgroundColor: '#fff'}}>
                                {props.navigation.canGoBack() ? <Appbar.BackAction onPress={()=>{
                                    props.navigation.goBack();
                                }} /> : <Appbar.Action icon="menu" style={{padding:0, margin:0}} onPress={()=>{props.navigation.navigate('Menu');}} />}
                                <Appbar.Content title="EMI Fellowship" titleStyle={{}}/>
                                <Appbar.Action icon="chat" onPress={()=>{alert("Chats are comming soon.")}} />
                                <Appbar.Action icon="search" onPress={()=>{props.navigation.navigate("Search")}} />
                                <Appbar.Action icon="notifications" onPress={()=>{props.navigation.navigate("Notifications")}} />
                            </Appbar.Header>
                        )
                    },
                }}>
                    <Stack.Screen
                        name="MainNavigation"
                        component={MainNavigation}
                    />
                    <Stack.Screen
                        name="Profile"
                        component={Profile}
                    />
                    <Stack.Screen
                        name="NewPost"
                        component={NewPostView}
                    />
                    <Stack.Screen
                        name="NewGroup"
                        component={NewGroup}
                    />
                    <Stack.Screen
                        name="Search"
                        component={Search}
                    />
                    <Stack.Screen
                        name="ProfileSettings"
                        component={ProfileSettings}
                    />
                    <Stack.Screen
                        name="Invite"
                        component={InviteView}
                    />
                    <Stack.Screen
                        name="Menu"
                        component={MenuView}
                    />
                    <Stack.Screen
                        name="Notifications"
                        component={NotificationsView}
                    />
                    <Stack.Screen name="SinglePost" component={SinglePost} />
                    <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                    <Tab.Screen name="Logout" component={Login} />
                </Stack.Navigator>
            </NavigationContainer>
            <MediaView></MediaView>
            </KeyboardAvoidingView>
        </PaperProvider>
    );
}