import crashlytics from '@react-native-firebase/crashlytics';
import { RouteProp } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { getUniqueId } from 'react-native-device-info';
import { useSelector } from 'react-redux';
import { _map } from './RN-UI-LIB/src/utlis/common';
import { GenericType } from './src/common/GenericTypes';
import Widget from './src/components/form';
import { setGlobalUserData } from './src/constants/Global';
import RealTemplate from './src/data/RealTemplateData.json';
import { useAppDispatch } from './src/hooks';
import useFirestoreUpdates from './src/hooks/useFirestoreUpdates';
import { setDeviceId } from './src/reducer/userSlice';
import AllCasesMain from './src/screens/allCases';
import CaseDetails from './src/screens/caseDetails/CaseDetails';
import interactionsHandler from './src/screens/caseDetails/interactionsHandler';
import Login from './src/screens/login';
import OtpInput from './src/screens/login/OtpInput';
import Profile from './src/screens/Profile';
import TodoList from './src/screens/todoList/TodoList';
import { RootState } from './src/store/store';

const ANIMATION_DURATION = 300;

const Stack = createNativeStackNavigator();

const ProtectedRouter = () => {
    const user = useSelector(
        (state: RootState) => state.user,
    );

    const {isLoggedIn, deviceId, sessionDetails} = user;

    // for setting user token in global.ts for api calling's
    setGlobalUserData(sessionDetails?.sessionToken, deviceId);
    interactionsHandler()
    const dispatch = useAppDispatch();

    // Firestore listener hook
    useFirestoreUpdates();

    if (!deviceId) {
        getUniqueId().then(id => dispatch(setDeviceId(id)));
    }

    const getScreenFocusListenerObj = ({route}: {route: RouteProp<GenericType>}) => ({
        focus: () => {
            crashlytics().log(JSON.stringify(route));
        }
      });

    return (
        <Stack.Navigator>
            {isLoggedIn ? (
                <>
                    <Stack.Screen
                        name="Home"
                        component={AllCasesMain}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="Profile"
                        component={Profile}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="caseDetail"
                        component={CaseDetails}
                        options={{
                            header: () => null,
                            animationDuration: ANIMATION_DURATION,
                            animation: 'none',
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    {_map(RealTemplate.widget, key => (
                        <Stack.Screen
                            key={key}
                            name={key}
                            component={Widget}
                            options={{
                                header: () => null,
                                animation: 'slide_from_right',
                                animationDuration: ANIMATION_DURATION
                            }}
                            listeners={getScreenFocusListenerObj}
                        />
                    ))}
                    <Stack.Screen
                        name="TodoList"
                        component={TodoList}
                        options={{
                            header: () => null,
                            animation: 'slide_from_bottom',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                </>
            ) : (
                <>
                    <Stack.Screen
                        name="Login"
                        component={Login}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="OTP"
                        component={OtpInput}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                </>
            )}
        </Stack.Navigator>
    );
};

export default ProtectedRouter;