DrawerNavigator.tsx

import * as React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';
import { Text } from 'react-native-paper';
import { createDrawerNavigator } from '@react-navigation/drawer';

// TYPES
import type { IconNameType } from '../components/Common/Icon';

// HELPERS
import { getReactComponentProps } from '../helpers/utils';

// COMPONENTS
import CustomDrawerContent from '../components/CustomDrawer';
import BottomTabsNavigator from './BottomTabsNavigator';
import SCREENS from '../screens';

// STYLES
import {
	GLOBAL_STYLE as GS,
	CONSTANT_SIZE as CS,
	CONSTANT_COLOR as CC,
	CONSTANT_FONT as CF,
} from '../assets/ts/styles';
import { STYLES as HEADER_STYLES } from '../components/Headers/SharedHeader';
import { BButton } from '../components';
import GameMenuItem from '../components/Games/GameMenuItem';
import BOTTOM_TABS_ROUTES_NAMES from './BottomTabsNavigator';

// LOCAL TYPES
export interface DrawerLinkItem {
	label: string;
	path: string;
	icon?: IconNameType;
	external?: boolean;
	focused?: boolean;
	collapseContent?: React.FC;
}
export interface DrawerRoutesGroupType {
	title?: string;
	icon?: IconNameType;
	linkItems?: DrawerLinkItem[];
}
export type DrawerScreenType = typeof DRAWER_SCREEN_PROPS;

// COMPONENTS
const Drawer = createDrawerNavigator();
const DrawerScreen = createDrawerNavigator().Screen;

// DATA
export const DRAWER_SCREEN_PROPS = getReactComponentProps(DrawerScreen);
export const DRAWER_ROUTES_NAMES = {
	HOME: 'DRAWER/HOME',
	GAMES: 'DRAWER/GAMES',
	WINNING_NUMBERS: 'DRAWER/WINNING_NUMBERS',
	LOTTERY_GAMES_LOBBY: 'DRAWER/LOTTERY_GAMES_LOBBY',
	TICKET_CHECKER: 'DRAWER/TICKET_CHECKER',
	INSTANT_GAMES_INNER: 'DRAWER/INSTANT_GAMES_INNER',
	RETAILER_LOCATIONS: 'DRAWER/RETAILER_LOCATIONS',
	BONUS_AND_PROMOTIONS: 'DRAWER/BONUS_AND_PROMOTIONS',
	BONUS_AND_PROMOTIONS__INNER: 'DRAWER/BONUS_AND_PROMOTIONS__INNER',
	TERMS_CONDITIONS: 'DRAWER/TERMS_CONDITIONS',
	PRIVACE_COOKIE_POLICY: 'DRAWER/PRIVACE_COOKIE_POLICY',
	ADA_STATEMENT: 'DRAWER/ADA_STATEMENT',
	RESPONSIBLE_GAMING: 'DRAWER/RESPONSIBLE_GAMING',
	HELP_CENTER: 'DRAWER/HELP_CENTER',
	ACCOUNT__GAMING_HISTORY: 'DRAWER/ACCOUNT__GAMING_HISTORY',
	ACCOUNT__PROFIL_LOSS: 'DRAWER/ACCOUNT__PROFIL_LOSS',
	ACCOUNT__TRANSACTION_HISTORY: 'DRAWER/ACCOUNT__TRANSACTION_HISTORY',
	WALLET__WITHDRAW: 'DRAWER/WALLET__WITHDRAW',
	WALLET__DEPOSIT: 'DRAWER/WALLET__DEPOSIT',
	WALLET__DEPOSIT_RESULT: 'DRAWER/WALLET__DEPOSIT_RESULT',
	WALLET__WITHDRAW_RESULT: 'DRAWER/WALLET__WITHDRAW_RESULT',
	WALLET__MANAGE_PAYMENT_METHODS: 'DRAWER/WALLET__MANAGE_PAYMENT_METHODS',
	WALLET__PREVIEW_BANK_ACCOUNT: 'DRAWER/WALLET__PREVIEW_BANK_ACCOUNT',
	WALLET__ADD_BANK_ACCOUNT: 'DRAWER/WALLET__ADD_BANK_ACCOUNT',
	WALLET__ADD_BANK_ACCOUNT_DOC_UPLOAD:
		'DRAWER/WALLET__ADD_BANK_ACCOUNT_DOC_UPLOAD',
	ACCOUNT__GAMING_HISTORY_STEP_1: 'DRAWER/ACCOUNT__GAMING_HISTORY_STEP_1',
	ACCOUNT__GAMING_HISTORY_STEP_2: 'DRAWER/ACCOUNT__GAMING_HISTORY_STEP_2',
	ACCOUNT__SETTING_DEPOSIT_LIMIT: 'DRAWER/ACCOUNT__SETTING_DEPOSIT_LIMIT',
	ACCOUNT__SETTING_WITHDRAW_LIMIT: 'DRAWER/ACCOUNT__SETTING_WITHDRAW_LIMIT',
	ACCOUNT__SETTING_PLAY_LIMIT: 'DRAWER/ACCOUNT__SETTING_PLAY_LIMIT',
	ACCOUNT__SETTING_LOSS_LIMIT: 'DRAWER/ACCOUNT__SETTING_LOSS_LIMIT',
	ACCOUNT__ENABLE_QUICK_LOGIN: 'DRAWER/ACCOUNT__ENABLE_QUICK_LOGIN',
	ACCOUNT__CHANGE_USERNAME: 'DRAWER/ACCOUNT__CHANGE_USERNAME',
	ACCOUNT__OPT_CONFIRMATION: 'DRAWER/ACCOUNT__OPT_CONFIRMATION',
	ACCOUNT__CHANGE_EMAIL_SUCCESS: 'DRAWER/ACCOUNT__CHANGE_EMAIL_SUCCESS',
	ACCOUNT__CHANGE_PERSONAL_INFORMATION:
		'DRAWER/ACCOUNT__CHANGE_PERSONAL_INFORMATION',
	ACCOUNT__CHANGE_EMAIL: 'DRAWER/ACCOUNT__CHANGE_EMAIL',
	ACCOUNT__CHANGE_ADDRESS: 'DRAWER/ACCOUNT__CHANGE_ADDRESS',
	ACCOUNT__CHANGE_MOBILE_NUMBER: 'DRAWER/ACCOUNT__CHANGE_MOBILE_NUMBER',
	ACCOUNT__CHANGE_PASSWORD: 'DRAWER/ACCOUNT__CHANGE_PASSWORD',
	ACCOUNT__CHANGE_SECURITY_QUESTIONS:
		'DRAWER/ACCOUNT__CHANGE_SECURITY_QUESTIONS',
	ACCOUNT__EDIT_COMMUNICATION_PREFERENCES:
		'DRAWER/ACCOUNT__EDIT_COMMUNICATION_PREFERENCES',
	ACCOUNT__SELF_EXCLUSION: 'DRAWER/ACCOUNT__SELF_EXCLUSION',
	ACCOUNT__COOL_OFF: 'DRAWER/ACCOUNT__COOL_OFF',
	ACCOUNT__MY_FAVORITES: 'DRAWER/ACCOUNT__MY_FAVORITES',
	ACCOUNT__MY_FAVORITES_INNER: 'DRAWER/ACCOUNT__MY_FAVORITES_INNER',
	ACCOUNT__MESSAGES: 'DRAWER/ACCOUNT__MESSAGES',
	ACCOUNT__MESSAGES_INNER: 'DRAWER/ACCOUNT__MESSAGES_INNER',
	ACCOUNT__MY_PROMOTIONS: 'DRAWER/ACCOUNT__MY_PROMOTIONS',
	ACCOUNT__MY_PROMOTIONS_INNER: 'DRAWER/ACCOUNT__MY_PROMOTIONS_INNER',
	ACCOUNT__SESSION_LIMIT_STEP_1: 'DRAWER/ACCOUNT__SESSION_LIMIT_STEP_1',
	ACCOUNT__SESSION_LIMIT_STEP_2: 'DRAWER/ACCOUNT__SESSION_LIMIT_STEP_2',
	ACCOUNT__CHANGE_PLAY_LIMIT_STEP_1: 'DRAWER/ACCOUNT__CHANGE_PLAY_LIMIT_STEP_1',
	ACCOUNT__CHANGE_LOSS_LIMIT_STEP_1: 'DRAWER/ACCOUNT__CHANGE_LOSS_LIMIT_STEP_1',
	ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_1:
		'DRAWER/ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_1',
	ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_2:
		'DRAWER/ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_2',
	ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_3:
		'DRAWER/ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_3',
	ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_4:
		'DRAWER/ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_4',
	ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_1:
		'DRAWER/ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_1',
	ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_2:
		'DRAWER/ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_2',
	ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_3:
		'DRAWER/ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_3',
	ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_4:
		'DRAWER/ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_4',
	ACCOUNT__LOGGED_IN: 'ACCOUNT__LOGGED_IN',
	ACCOUNT__LOGGED_OUT: 'ACCOUNT__LOGGED_OUT',
	THANK_YOU: 'DRAWER/THANK_YOU',
	ACCOUNT__REALITY_CHECK_STEP_1: 'DRAWER/ACCOUNT__REALITY_CHECK_STEP_1',
	ACCOUNT__REALITY_CHECK_STEP_2: 'DRAWER/ACCOUNT__REALITY_CHECK_STEP_2',
	INSTANT_GAMES_SCREEN: 'DRAWER/INSTANT_GAMES_SCREEN',
};
const DRAWER_ROUTES: DrawerScreenType[] = [
	{
		name: DRAWER_ROUTES_NAMES.HOME,
		component: BottomTabsNavigator,
	},
	{
		name: DRAWER_ROUTES_NAMES.GAMES,
		component: SCREENS.APP.NUMERICAL_GAME_INNER,
	},
	{
		name: DRAWER_ROUTES_NAMES.INSTANT_GAMES_SCREEN,
		component: SCREENS.APP.INSTANT_GAMES.INSTANT_GAMES_SCREEN,
	},
	{
		name: DRAWER_ROUTES_NAMES.WINNING_NUMBERS,
		component: SCREENS.APP.WINNING_NUMBERS,
	},
	{
		name: DRAWER_ROUTES_NAMES.TICKET_CHECKER,
		component: SCREENS.APP.TICKET_CHECKER,
	},
	{
		name: DRAWER_ROUTES_NAMES.INSTANT_GAMES_INNER,
		component: SCREENS.APP.INSTANT_GAMES.INSTANT_GAMES_INNER,
	},
	{
		name: DRAWER_ROUTES_NAMES.LOTTERY_GAMES_LOBBY,
		component: SCREENS.APP.LOTTERY_GAMES.LOBBY_SCREEN,
	},
	{
		name: DRAWER_ROUTES_NAMES.RETAILER_LOCATIONS,
		component: SCREENS.APP.RETAILER_LOCATIONS,
	},
	{
		name: DRAWER_ROUTES_NAMES.BONUS_AND_PROMOTIONS,
		component: SCREENS.APP.BONUS_AND_PROMOTIONS.BONUS_AND_PROMOTIONS_SCREEN,
	},
	{
		name: DRAWER_ROUTES_NAMES.BONUS_AND_PROMOTIONS__INNER,
		component: SCREENS.APP.BONUS_AND_PROMOTIONS.BONUS_AND_PROMOTIONS__INNER,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__MY_PROMOTIONS,
		component: SCREENS.APP.ACCOUNT.MY_PROMOTIONS.VIEW_ALL,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__MY_PROMOTIONS_INNER,
		component: SCREENS.APP.ACCOUNT.MY_PROMOTIONS.VIEW_ONE,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__PROFIL_LOSS,
		component: SCREENS.APP.ACCOUNT.PROFIL_LOSS,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__TRANSACTION_HISTORY,
		component: SCREENS.APP.ACCOUNT.TRANSACTION_HISTORY,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__WITHDRAW,
		component: SCREENS.APP.WALLET.WITHDRAW,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__DEPOSIT,
		component: SCREENS.APP.WALLET.DEPOSIT,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__DEPOSIT_RESULT,
		component: SCREENS.APP.WALLET.DEPOSIT_RESULT,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__WITHDRAW_RESULT,
		component: SCREENS.APP.WALLET.WITHDRAW_RESULT,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__MANAGE_PAYMENT_METHODS,
		component: SCREENS.APP.WALLET.MANAGE_PAYMENT_METHODS,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__PREVIEW_BANK_ACCOUNT,
		component: SCREENS.APP.WALLET.PREVIEW_BANK_ACCOUNT,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__ADD_BANK_ACCOUNT,
		component: SCREENS.APP.WALLET.ADD_BANK_ACCOUNT,
	},
	{
		name: DRAWER_ROUTES_NAMES.WALLET__ADD_BANK_ACCOUNT_DOC_UPLOAD,
		component: SCREENS.APP.WALLET.ADD_BANK_ACCOUNT_DOC,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__MY_FAVORITES,
		component: SCREENS.APP.ACCOUNT.MY_FAVORITE_COUPONS.VIEW_ALL,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__MY_FAVORITES_INNER,
		component: SCREENS.APP.ACCOUNT.MY_FAVORITE_COUPONS.VIEW_ONE,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__MESSAGES,
		component: SCREENS.APP.ACCOUNT.MY_MESSAGES.VIEW_ALL,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__MESSAGES_INNER,
		component: SCREENS.APP.ACCOUNT.MY_MESSAGES.VIEW_ONE,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__GAMING_HISTORY_STEP_1,
		component: SCREENS.APP.ACCOUNT.GAMING_HISTORY.STEP_1,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__GAMING_HISTORY_STEP_2,
		component: SCREENS.APP.ACCOUNT.GAMING_HISTORY.STEP_2,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__SETTING_DEPOSIT_LIMIT,
		component: SCREENS.APP.ACCOUNT.RESPONSIBLE_GAMBLING.SETTING_DEPOSIT_LIMIT,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__SETTING_WITHDRAW_LIMIT,
		component: SCREENS.APP.ACCOUNT.RESPONSIBLE_GAMBLING.SETTING_WITHDRAW_LIMIT,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__SETTING_PLAY_LIMIT,
		component: SCREENS.APP.ACCOUNT.RESPONSIBLE_GAMBLING.SETTING_PLAY_LIMIT,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__SETTING_LOSS_LIMIT,
		component: SCREENS.APP.ACCOUNT.RESPONSIBLE_GAMBLING.SETTING_LOSS_LIMIT,
	},
	/*
	 ** EDIT PROFILE
	 */
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__ENABLE_QUICK_LOGIN,
		component: SCREENS.APP.ACCOUNT.ENABLE_QUICK_LOGIN,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_USERNAME,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.CHANGE_USERNAME,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__OPT_CONFIRMATION,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.OPT_CONFIRMATION,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_EMAIL_SUCCESS,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.CHANGE_EMAIL_SUCCESS,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_PERSONAL_INFORMATION,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.PERSONAL_INFORMATION,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_EMAIL,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.CHANGE_EMAIL,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_ADDRESS,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.CHANGE_ADDRESS,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_MOBILE_NUMBER,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.CHANGE_MOBILE_NUMBER,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_PASSWORD,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.CHANGE_PASSWORD,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_SECURITY_QUESTIONS,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.CHANGE_SECURITY_QUESTIONS,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__EDIT_COMMUNICATION_PREFERENCES,
		component: SCREENS.APP.ACCOUNT.EDIT_DETAILS.EDIT_COMMUNICATION_PREFERENCES,
	},
	/*
	 **
	 */
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__SELF_EXCLUSION,
		component: SCREENS.APP.ACCOUNT.RESPONSIBLE_GAMBLING.SELF_EXCLUSION,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__COOL_OFF,
		component: SCREENS.APP.ACCOUNT.RESPONSIBLE_GAMBLING.COOL_OFF,
	},
	/*
	 ** SESSION LIMIT
	 */
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__SESSION_LIMIT_STEP_1,
		component: SCREENS.APP.ACCOUNT.SESSION_LIMIT.STEP_1,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__SESSION_LIMIT_STEP_2,
		component: SCREENS.APP.ACCOUNT.SESSION_LIMIT.STEP_2,
	},
	// INFORMATIONS
	{
		name: DRAWER_ROUTES_NAMES.TERMS_CONDITIONS,
		component: SCREENS.APP.TERMS_CONDITIONS,
	},
	{
		name: DRAWER_ROUTES_NAMES.PRIVACE_COOKIE_POLICY,
		component: SCREENS.APP.PRIVACE_COOKIE_POLICY,
	},
	{
		name: DRAWER_ROUTES_NAMES.HELP_CENTER,
		component: SCREENS.APP.HELP_CENTER,
	},
	{
		name: DRAWER_ROUTES_NAMES.ADA_STATEMENT,
		component: SCREENS.APP.ADA_STATEMENT,
	},
	{
		name: DRAWER_ROUTES_NAMES.RESPONSIBLE_GAMING,
		component: SCREENS.APP.RESPONSIBLE_GAMING,
	},
	//
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_PLAY_LIMIT_STEP_1,
		component: SCREENS.APP.ACCOUNT.CHANGE_PLAY_LIMIT.STEP_1,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_LOSS_LIMIT_STEP_1,
		component: SCREENS.APP.ACCOUNT.CHANGE_LOSS_LIMIT.STEP_1,
	},
	/*
	 ** CHANGE DEPOSIT LIMIT
	 */
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_1,
		component: SCREENS.APP.ACCOUNT.CHANGE_DEPOSIT_LIMIT.STEP_1,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_2,
		component: SCREENS.APP.ACCOUNT.CHANGE_DEPOSIT_LIMIT.STEP_2,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_3,
		component: SCREENS.APP.ACCOUNT.CHANGE_DEPOSIT_LIMIT.STEP_3,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_DEPOSIT_LIMIT_STEP_4,
		component: SCREENS.APP.ACCOUNT.CHANGE_DEPOSIT_LIMIT.STEP_4,
	},
	/*
	 ** CHANGE WITHDRAW LIMIT
	 */
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_1,
		component: SCREENS.APP.ACCOUNT.CHANGE_WITHDRAW_LIMIT.STEP_1,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_2,
		component: SCREENS.APP.ACCOUNT.CHANGE_WITHDRAW_LIMIT.STEP_2,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_3,
		component: SCREENS.APP.ACCOUNT.CHANGE_WITHDRAW_LIMIT.STEP_3,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_WITHDRAW_LIMIT_STEP_4,
		component: SCREENS.APP.ACCOUNT.CHANGE_WITHDRAW_LIMIT.STEP_4,
	},
	/*
	 ** REALITY CHECK
	 */
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__REALITY_CHECK_STEP_1,
		component: SCREENS.APP.ACCOUNT.REALITY_CHECK.STEP_1,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__REALITY_CHECK_STEP_2,
		component: SCREENS.APP.ACCOUNT.REALITY_CHECK.STEP_2,
	},
	/*
	 ** LOGGED
	 */
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__LOGGED_IN,
		component: SCREENS.APP.ACCOUNT.LOGGED_IN,
	},
	{
		name: DRAWER_ROUTES_NAMES.ACCOUNT__LOGGED_OUT,
		component: SCREENS.APP.ACCOUNT.LOGGED_OUT,
	},
	{
		name: DRAWER_ROUTES_NAMES.THANK_YOU,
		component: SCREENS.APP.THANK_YOU,
	},
];
const STYLES = StyleSheet.create({
	drawerStyle: {
		...GS.bgTransparent,
		...GS.w100,
		// marginTop: HEADER_STYLES.safeAreaView.height,
	},
});

const GamesCollapseContent: React.FC<any> = ({ appData, navigation }) => {
	// Get Lottery & Casino games to populate sidebar with
	const lotteryGames =
		appData.response.menuGamesLists?.lotteryListOverview?.games || [];
	const casinoGames =
		appData.response.menuGamesLists.casinoListOverview.games || [];


	const jackpotDisplay = (text) => {
		var newT = text;
		if (newT.endsWith(".00")) {
			newT = newT.substring(0, text.length - 3);
		}
		return newT;
	}
	return (
		<>
			<View style={{ ...GS.mx2 }}>
				<View>
					<Text
						style={{ ...GS.txtPrimary, ...CF.h2, ...GS.mb1, color: '#00ACD4' }}>
						DRAW GAMES
					</Text>
					{lotteryGames &&
						lotteryGames.find((e) => e.gameId == '2123') != null &&
						lotteryGames.find((e) => e.gameId == '2124') != null &&
						lotteryGames.find((e) => e.gameId == '2150') != null &&
						lotteryGames.find((e) => e.gameId == '5145') != null &&
						lotteryGames.find((e) => e.gameId == '5143') != null &&
						lotteryGames.find((e) => e.gameId == '5253') != null &&
						lotteryGames.find((e) => e.gameId == '2152') != null &&
						[
							lotteryGames.find((e) => e.gameId == '2123'),
							lotteryGames.find((e) => e.gameId == '2124'),
							lotteryGames.find((e) => e.gameId == '2150'),
							lotteryGames.find((e) => e.gameId == '5145'),
							lotteryGames.find((e) => e.gameId == '5143'),
							lotteryGames.find((e) => e.gameId == '5253'),
							lotteryGames.find((e) => e.gameId == '2152'),
						].map((game: any, index: number) => {
							return (
								<View key={index} style={{ ...GS.row, ...GS.mb2 }}>
									<View style={{ ...GS.flex1 }}>
										<Text style={{ ...GS.txtSmall, color: 'white' }}>
											{game.name}
										</Text>
										<Text style={{ ...GS.txtSecondary, color: '#ED174B' }}>
											{jackpotDisplay(game.jackpotText)}
										</Text>
									</View>

									<TouchableOpacity
										onPress={() => {
											navigation.navigate(DRAWER_ROUTES_NAMES.GAMES as never, {
												gameId: game.gameId,
											});
										}}
										style={{
											...GS.border,
											...GS.roundedMd,
											...GS.centered,
											...GS.px2,
										}}>
										<Text
											style={{
												...GS.txtSmall,
												...GS.FF_PoppinsBold,
												color: 'white',
											}}>
											BUY NOW
										</Text>
									</TouchableOpacity>
								</View>
							);
						})}
				</View>
				<BButton
					mode="danger"
					title="VIEW ALL DRAW GAMES"
					onPress={() => {
						navigation.navigate(
							DRAWER_ROUTES_NAMES.LOTTERY_GAMES_LOBBY as never,
						);
					}}
				/>
				<View>
					<Text
						style={{
							...GS.txtPrimary,
							...CF.h2,
							...GS.mb1,
							...GS.mt4,
							color: '#00ACD4',
						}}>
						INSTANT GAMES
					</Text>
					{casinoGames.map((game: any, index: number) => {
						return <GameMenuItem key={index} item={game} />;
					})}
				</View>
				<BButton
					mode="danger"
					title="VIEW ALL INSTANT GAMES"
					onPress={() => {
						navigation.navigate(
							DRAWER_ROUTES_NAMES.INSTANT_GAMES_SCREEN as never,
						);
					}}
				/>
			</View>
		</>
	);
};

const DrawerNavigator: React.FC = () => {
	// DATA
	const ROUTES_GROUPS: DrawerRoutesGroupType[] = [
		{
			linkItems: [
				{
					label: 'LOTTERY LOBBY',
					path: DRAWER_ROUTES_NAMES.LOTTERY_GAMES_LOBBY,
				},
				{
					label: 'GAMES',
					path: DRAWER_ROUTES_NAMES.GAMES,
					collapseContent: GamesCollapseContent,
				},
				{
					label: 'WINNING NUMBERS',
					path: DRAWER_ROUTES_NAMES.WINNING_NUMBERS,
				},
				{
					label: 'TICKET CHECKER',
					path: DRAWER_ROUTES_NAMES.TICKET_CHECKER,
				},
				{
					label: 'BONUS & PROMOTIONS',
					path: DRAWER_ROUTES_NAMES.BONUS_AND_PROMOTIONS,
				},
				{
					label: 'HELP CENTER',
					path: DRAWER_ROUTES_NAMES.HELP_CENTER,
				},
				{
					label: 'FIND A RETAILER',
					path: DRAWER_ROUTES_NAMES.RETAILER_LOCATIONS,
				},
				{
					label: 'TERMS & CONDITIONS',
					path: DRAWER_ROUTES_NAMES.TERMS_CONDITIONS,
				},
			],
		},
	];

	return (
		<Drawer.Navigator
			initialRouteName="DRAWER/HOME"
			defaultStatus="closed"
			screenOptions={{
				sceneContainerStyle: GS.bgTransparent,
				headerShown: false,
				drawerStyle: STYLES.drawerStyle,
				drawerType: 'front',
			}}
			drawerContent={(props: any) => (
				<CustomDrawerContent
					drawerContentProps={props}
					linksGroups={ROUTES_GROUPS}
					ScrollViewProps={{
						contentContainerStyle: {
							...GS.pt0,
							minHeight: CS.SCREEN_HEIGHT - HEADER_STYLES.safeAreaView.height,
						},
						showsVerticalScrollIndicator: false,
					}}
				/>
			)}>
			{DRAWER_ROUTES.map((stackScreenProps, id) => (
				<Drawer.Screen
					key={id}
					// options={{ unmountOnBlur: true }}
					{...stackScreenProps}
				/>
			))}
		</Drawer.Navigator>
	);
};

export default DrawerNavigator;