// import React, {useState, useEffect, Fragment} from 'react';
import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import OnboardingStack from '@navigation/onboarding';
import CredentialDetail from '@screens/credential-detail';
import ContactUsScreen from '@screens/contact-us';
import TermsAndConditionScreen from '@screens/terms-and-condition';
import EditDetailsScreen from '@screens/edit-details';
import AppBottomBar from '@navigation/app-bottom-tab';
import useUser from '@contexts/user';
import {ONBOARDING} from '@constants/navigation/onboarding';
import {APP_BOTTOM_TAB} from '@constants/navigation/app-bottom-tab';
import {CREDENTIAL_DETAIL} from '@constants/navigation/credential-detail';
import {EDIT_DETAILS} from '@constants/navigation/edit-details';
import {CONTACT_US} from '@constants/navigation/contact-us';
import {TERMS_AND_CONDITION} from '@constants/navigation/terms-and-condition';

const {Navigator, Screen, Group} = createNativeStackNavigator();

const Navigation = () => {
  const {user} = useUser();

  return (
    <Navigator
      screenOptions={{
        headerShown: false,
      }}>
      {user?.accessToken ? (
        <Group>
          <Screen name={APP_BOTTOM_TAB.STACK} component={AppBottomBar} />
          <Screen
            name={CREDENTIAL_DETAIL.SCREEN}
            component={CredentialDetail}
          />
          <Screen name={EDIT_DETAILS.SCREEN} component={EditDetailsScreen} />
          <Screen name={CONTACT_US.SCREEN} component={ContactUsScreen} />
        </Group>
      ) : (
        <Screen name={ONBOARDING.STACK} component={OnboardingStack} />
      )}
      <Screen
        name={TERMS_AND_CONDITION.SCREEN}
        component={TermsAndConditionScreen}
      />
    </Navigator>
  );
};

export default Navigation;