import AccountInfoBanner, {
  MyUserAccountInfoBanner,
} from '@caj/components/userUI/AccountInfoBanner';
import NotLoggedIn from '@caj/components/NotLoggedIn';
import {ThemeMode} from '@caj/configs/appVar';
import {defaultHeaderStyle} from '@caj/configs/colors';
import {RootStackNavigatorParamList} from '@caj/Navigation';
import {RootState} from '@caj/redux/store';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {Box, Center, Container, Text} from 'native-base';
import {useSelector} from 'react-redux';

export const AccountTabName = 'Account';

export type AccountStackNavigatorParamList = {
  Overview: undefined;
};

const AccountStack =
  createNativeStackNavigator<AccountStackNavigatorParamList>();

export type AccountScreenNavigationProp =
  NativeStackNavigationProp<AccountStackNavigatorParamList>;

function AccountTab() {
  const lang = useSelector((state: RootState) => state.appVariables.lang);
  const theme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );

  return (
    <AccountStack.Navigator>
      <AccountStack.Screen
        name="Overview"
        options={{
          animation: 'slide_from_left',
          title: lang.navigation.home.account,
          headerShown: true,
          ...defaultHeaderStyle(theme),
        }}
        component={AccountScreen}
      />
    </AccountStack.Navigator>
  );
}

function AccountScreen() {
  const theme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );
  return (
    <>
      <Box
        bg="blackBG.400"
        {...(theme === ThemeMode.Darkest
          ? {borderBottomWidth: 1, borderColor: 'white.900'}
          : {})}
        style={{
          width: '100%',
          paddingVertical: 20,
          borderBottomLeftRadius: 20,
        }}>
        <MyUserAccountInfoBanner />
      </Box>
      <NotLoggedIn />
    </>
  );
}

export default AccountTab;