NumericalGameInner.screen

import React, { useEffect } from 'react';
import { View, ScrollView, ActivityIndicator } from 'react-native';
import { Text } from 'react-native-paper';
import { Slider } from '@miblanchard/react-native-slider';
import {
	CONSTANT_COLOR as CC,
	CONSTANT_COLOR,
	GLOBAL_STYLE,
	GLOBAL_STYLE as GS,
	icons,
} from '../../../assets';
import Moment from 'moment';
import { ticketFactory, gameSettings } from 'CanvasLotteryDemo';
import crashlytics from '@react-native-firebase/crashlytics';

import {
	BButton,
	BIcon,
	BImage,
	BListItem,
	BPageHeader,
	BSeparator,
	BSwitch,
	BTimer,
	Footer,
	GenerateQrCodeModal,
	InfoButton,
	Layout,
	SizedBox,
	CustomTrackSlider,
	BToggle,
	BModal,
	BModalHeader,
	BModalFooter,
} from '../../../components';
//
import { OptionSelectable, TransparentContainer } from './components';
//
import {
	FavoritePayslipsView,
	ManualPlayView,
	QuickPlayView
} from './views';
//
import styles from './styles';
import {
	AddToFavoritesModal,
	ConfirmationModal,
	StatisticModal,
} from './modals';
import { FavoriteCoupon, LotteryGame, LotteryGameSettings, Ticket } from '../../../types';
import LinearGradient from 'react-native-linear-gradient';
import { useNavigation } from '@react-navigation/native';
import { ApiClient } from '../../../api';
import { useMutation } from 'react-query';
import mobxStore, { CartTicket } from '../../../store/RootStore';
import { AxiosError } from 'axios';
import { useAuthContext } from '../../../context/auth/auth.context';
import { useGameFutureDraws } from '../../../hooks/useGameFutureDraws';
import moment from 'moment';
import { useAppContext } from '../../../context/auth/app.context';
import LoadingScreen from '../../Loading.screen';
import {
	getDCTotalCostDetails,
	getTabColor,
	getTotalCostOfTicket,
	isDCGame,
	isDCTimeZone,
	isMegaMillion,
	isPowerBall,
	isR2RGame,
	loadFavoriteCoupon,
	multidrawValueToMultidrawObject,
	sliderIndexToMultidrawObject,
	utilsGetBuyNowButtonEnabled,
	utilsGetDCFromIndex,
	utilsGetDrawDays,
	utilsGetUpdateSliderMaxValue,
} from '../../../helpers/utils';
import ViewNumericalGameInfoModal from './modals/ViewNumericalGameInfoModal';
import MessageModal from './modals/MessageModal';
import { GameCardDrawResults } from '../../../components/Carousel/Carousel.component';
import { useLastDraw } from '../../../hooks/useLastDraw';
import GenericSuccessModal from '../../../components/Common/GenericSuccessModal';

//
enum NUMERICAL_GAME_VIEW {
	MANUEL_PLAY = 'MANUEL_PLAY',
	QUICK_PLAY = 'QUICK_PLAY',
	SYSTEM_PLAY = 'SYSTEM_PLAY',
	FAVORITE_PAYSLIPS = 'FAVORITE_PAYSLIPS',
}

const ADVANCE_PLAYS = [
	{label: "TODAY", value: "TOD", indexDay: null},
	{label: "SUNDAY", value: "SUN", indexDay: 7},
	{label: "MONDAY", value: "MON", indexDay: 1},
	{label: "TUESDAY", value: "TUE", indexDay: 2},
	{label: "WEDNESDAY", value: "WED", indexDay: 3},
	{label: "THURSDAY", value: "THU", indexDay: 4},
	{label: "FRIDAY", value: "FRI", indexDay: 5},
	{label: "SATURDAY", value: "SAT", indexDay: 6}
];

export enum NumericalGameInnerActionTypes {
	editFavorite = 'editFavorite',
	buyNow_quick_play = 'buyNow_quick_play',
}
export interface MultiDrawTicketClient {
	value: number;
	sliderIndex: number;
}
const NumericalGameInnerScreen = ({ route }: any) => {
	const {
		item,
		gameId,
		quickPick,
		action,
		favoriteCoupon,
		cartItem
	}: {
		item: any;
		gameId: number;
		quickPick?: any;
		action: NumericalGameInnerActionTypes;
		favoriteCoupon: FavoriteCoupon;
		cartItem?: CartTicket;
	} = route.params;
	const navigation = useNavigation();
	const { isAuthenticated, setShowLoginModal } = useAuthContext();
	const { isAppDataLoading, appData } = useAppContext();
	var config: LotteryGameSettings = gameSettings.getConfigForGame({ gameId: gameId });
	const { data: gameLastDraw, fetch: refetchGameLastDraw } = useLastDraw(`${gameId}`, { config: undefined});

	let lotteryGame: LotteryGame | null = null;
	if (appData && appData.response.lotteryGames) {
		lotteryGame = appData.response.lotteryGames[gameId];
	}

	const [disableManualInput, setDisableManualInput] =
		React.useState<boolean>(false);
	const [ticket, setTicket] = React.useState<Ticket>(
		ticketFactory.createDefault({ gameId, config }),
	);
	const [selectedFavoriteTicket, setSelectedFavoriteTicket] =
		React.useState<FavoriteCoupon | null>(null);
	const [currentCartItem, setCurrentCartItem] =
		React.useState<CartTicket | null>(null);
	const [verifyTicketObj, setVerifyTicketObj] = React.useState<any>(null);
	const [ticketOptions, setTicketOptions] = React.useState<any>([]);

	const [currentView, setCurrentView] = React.useState<NUMERICAL_GAME_VIEW>(
		NUMERICAL_GAME_VIEW.MANUEL_PLAY,
	);
	const [multiDraws, setMultiDraws] = React.useState<MultiDrawTicketClient>({
		value: 1,
		sliderIndex: 1,
	});
	const [showGenerateQrCodeModal, setShowGenerateQrCodeModal] =
		React.useState(false);
	const [showFavoriteNumberModal, setShowFavoriteNumberModal] =
		React.useState(false);
	const [showGameInfoModal, setShowGameInfoModal] = React.useState(false);
	const [showMegaplierConfirmation, setShowMegaplierConfirmation] = React.useState<any>(null);
	const [showStatisticModal, setShowStatisticModal] = React.useState(false);
	// const [ticketTotal, setTicketTotal] = React.useState(0);
	const [disableTicketSubmit, setDisableTicketSubmit] = React.useState(false);
	const [showBuyConfirmationModal, setShowBuyConfirmationModal] =
		React.useState(false);
	const [showBuyMessageModal, setShowBuyMessageModal] = React.useState(false);
	const [showJTJConfirmationModal, setShowJTJConfirmationModal] = React.useState<any>(null);
	const [serialNumber, setSerialNumber] = React.useState<number | null>(null);
	const [isModified, setIsModified] =  React.useState<boolean>(false);

	const [isScreenFocused, setIsScreenFocused] =  React.useState<boolean>(false);

	const [showSuccessAddFavorite, setShowSuccessAddFavorite] = React.useState<boolean>(false);
	const [showSuccessMessage, setShowSuccessMessage] = React.useState<string>("");

	const [cachedTicketPerPlays, setCachedTicketPerPlays] = React.useState<any>({
		"MANUEL_PLAY": null,
		"QUICK_PLAY": null,
		"SYSTEM_PLAY": null,
		"FAVORITE_PAYSLIPS": null
	});

	// let ticketActiveBoards =
	// 	ticket.boards.filter((entry) =>
	// 		entry.panels.some((pEntry) => pEntry.selections.length > 0),
	// 	).length || 0;
	const [advancePlay, setAdvancePlay] = React.useState<any>(ADVANCE_PLAYS[0].value);
	const [DRAW_TIMES, SET_DRAW_TIMES] = React.useState<any>([
		{label:'DAY', value: 'MOR'},
		{label:'NIGHT', value: 'EVE'},
		{label:'BOTH', value: 'BOTH'}
	]);
	const [drawTime, setDrawTime] = React.useState<any>(DRAW_TIMES[2].value);
	const [dcMultipleDrawsMaxValue, setDCMultipleDrawsMaxValue] = React.useState<number | null | undefined>(null);

	const [dcDetailsFrom, setDcDetailsFrom] = React.useState<any | null>(null);
	const [dcDetailsTo, setDcDetailsTo] = React.useState<any | null>(null);

	const [quickPickIndexSelected, setQuickIndexSelected] = React.useState<number | null>(null);

	// TO REVISIT
	const [dcDetailsFromIndex, setDcDetailsFromIndex] = React.useState<number>(0);
	const [dcDetailsToIndex, setDcDetailsToIndex] = React.useState<number>(0);
	const [displayTabs, setDisplayTabs] = React.useState<boolean>(true);

	let ticketActiveBoards = ticket
		.boards
		.filter((entry) => entry.panels.some((pEntry) => pEntry.selections.length > 0)).length || 0;

	let ticketNonCompletedBoards = ticket
		.boards
		.filter((entry) => entry.panels.some((pEntry) => pEntry.selections.length == 0)).length || 0;

	let ticketTotal = getTotalCostOfTicket(gameId, ticket, ticketOptions, config, multiDraws);

	const ticketCanBeSubmited = isAuthenticated && (ticketActiveBoards > 0 || ticketOptions.find((entry) => entry.canPlayAlone));

	const isJTJ = (ticketOptions ?? []).find((entry) => entry.id === 'JTJ') != null ? true : false;

	var isSliderDisabled = false;

	if (isR2RGame(gameId)) {
		if (ticket && ticket.boards.length > 0 && ticket.boards[0].options?.length > 0) {
			const dailyDoubleOption = ticket.boards[0].options.find((e) => e.id == "DAILY DOUBLE");
			if (dailyDoubleOption) {
				isSliderDisabled = true;
			}
		}
	}

	var isR2RBonusEnabled = false;
	if (ticketOptions.length > 0 && isR2RGame(gameId)) {
		const bonus = ticketOptions.find((e) => e.name == "Bonus" || e.id == "PowerPlay");
		if  (bonus) {
			isR2RBonusEnabled = true;
		}
	}

	let playDays: string[] = utilsGetDrawDays(gameId, appData, config);

	const canDisplayTotal = () => {
		var hideTotal = ticketNonCompletedBoards > 0 && !isJTJ;
		if (isR2RGame(gameId)) {
			const haveSomePanels = ticket.boards.filter((entry) => entry.panels.some((pEntry) => pEntry.selections.length > 0)).length || 0;
			if (haveSomePanels) {
				hideTotal = false;
			}
		}
		return !hideTotal;
	}

	useEffect(() => {
		if (action === 'editFavorite' && favoriteCoupon) {
			setSelectedFavoriteTicket(favoriteCoupon);
			const { multidraws, newTicketOptions, shouldDisableInput, newTicket } =
				loadFavoriteCoupon(gameId, config, favoriteCoupon);
			setMultiDraws(multidrawValueToMultidrawObject(multidraws, isDcGame(), isDrawTimeBoth(), isR2RGame(gameId)));
			setDisableManualInput(shouldDisableInput);
			newTicket.addOptions(newTicketOptions);
			setTicketOptions(newTicketOptions);

			setTicket(Object.create(newTicket));
			setCurrentView(NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS);
		} else if (action === 'buyNow_quick_play') {
			setCurrentView(NUMERICAL_GAME_VIEW.QUICK_PLAY);
		} else {
			setCurrentView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
			resetTicket();
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [gameId]);

	useEffect(() => {
		// FOR CART -> REFACTORING NEEDED !
        return navigation.addListener("focus", () => {
			if (cartItem && cartItem.ticket) {
				setCurrentCartItem(cartItem);
				handleSetUpCartTicket();
			}
			setIsScreenFocused(true);
			setTimeout(() => {
				setIsScreenFocused(false);
			}, 1000);
        });
    }, [navigation]);

	const handleSetUpCartTicket = () => {
		if (cartItem && cartItem.ticket) {
			const newTicket = cartItem.ticket;
			setDisableManualInput(cartItem.shouldDisableInput);
			newTicket.addOptions(cartItem.newOptions);
			setTicketOptions(cartItem.newOptions);
			if (cartItem.advancePlay) {
				newTicket.setDaySelection(advancePlay);
				setAdvancePlay(cartItem.advancePlay);
			}
			if (cartItem.drawTime) {
				newTicket.setTimePeriod(drawTime);
				setDrawTime(cartItem.drawTime);
			}
			if (cartItem.multiDraws) {
				if (isDcGame()) {
					setTimeout(() => {
						if (cartItem.multiDraws) {
							setMultiDraws(cartItem.multiDraws);
						}
					}, 500);
				} else {
					setMultiDraws(cartItem.multiDraws);
				}
			}
			setTicket(Object.create(newTicket));
			setCurrentView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
			// UPDATE CACHED TEMP
			var temp = {
				"MANUEL_PLAY": null,
				"QUICK_PLAY": null,
				"SYSTEM_PLAY": null,
				"FAVORITE_PAYSLIPS": null
			};
			temp[NUMERICAL_GAME_VIEW.MANUEL_PLAY.toString()] = {ticket: cartItem.ticket};
			setCachedTicketPerPlays(temp);
		}
	}

	const updateCart = () => {
		if (currentCartItem && currentCartItem.ticket) {
			setCurrentCartItem(null);
			mobxStore.updateCart(
				currentCartItem.id,
				ticket,
				ticketOptions,
				disableManualInput,
				multiDraws,
				drawTime,
				advancePlay,
				isDcGame() ? dcDetailsFromIndex : null,
				isDcGame() ? dcDetailsToIndex : null,
				isDcGame() ? dcticketDrawOffset() : null,
				isDcGame() ? isDrawTimeBoth() : false
			);
			resetTicket();
			mobxStore.setGlobalToast({
				mode: 'success',
				message: "Ticket updated",
			});
			navigation.goBack();
		}
	}
	
	useEffect(() => {
		if (isDcGame() && drawTime && advancePlay) {
			const updateMaxValue = getUpdateSliderMaxValue(advancePlay, drawTime);
			setDCMultipleDrawsMaxValue(updateMaxValue);
			const newValue = sliderIndexToMultidrawObject(1, isDcGame(), isDrawTimeBoth());
			setMultiDraws(newValue);
			ticket.setMultipleDraws(newValue.value);
			ticket.setTimePeriod(drawTime);
			ticket.setDaySelection(advancePlay);
		}
	}, [drawTime, advancePlay]);

	const isDcGame = () => {
		return isDCGame(gameId);
	}

	const { data: gameFutureDraws, fetch: refetchGameFutureDraws } =
		useGameFutureDraws(
			{
				gameId: gameId,
				numberOfDraws: config.maxNumberOfMultipleDraws,
				includeActive: true,
			},
			{ config: undefined },
	);

	const getDCFromIndex = (dTime: string, adPlay: string) => {
		return utilsGetDCFromIndex(gameFutureDraws, dTime, adPlay);
	}

	useEffect(() => {
		if (isDcGame() && drawTime && advancePlay) {
			if (gameFutureDraws?.response?.draws?.items.length) {
				var newDcFromIndex = getDCFromIndex(drawTime, advancePlay);
				setDcDetailsFromIndex(newDcFromIndex);
				setDcDetailsFrom(
					moment.unix(
						gameFutureDraws?.response.draws.items[newDcFromIndex].draw?.drawDate as number
					).format('MM/DD/yyyy hh:mm A')
				);

				// TO
				var multiDrawsToUse = (multiDraws.value - 1) * 2;
				if (drawTime == "BOTH") {
					multiDrawsToUse = multiDraws.value - 1;
				}
				var newDcToIndex = (newDcFromIndex + multiDrawsToUse);
				if (newDcToIndex >= gameFutureDraws.response.draws.items.length) {
					console.log("herre ");
					newDcToIndex = gameFutureDraws?.response.draws.items.length - 1
				}
				if (gameFutureDraws?.response.draws.items[newDcToIndex]?.draw) {
					setDcDetailsToIndex(newDcToIndex);
					setDcDetailsTo(
						moment.unix(
							gameFutureDraws?.response.draws.items[newDcToIndex].draw?.drawDate as number
						).format('MM/DD/yyyy hh:mm A')
					);
				}
				if (newDcFromIndex == gameFutureDraws?.response?.draws?.items.length - 1) {
					setDCMultipleDrawsMaxValue(null);
				}
			}
		}
	}, [multiDraws, gameFutureDraws]);

	const getCachedTicketByView = (view: NUMERICAL_GAME_VIEW) => {
		setDisableManualInput(false);
		//setSelectedFavoriteTicket(null);
		setIsModified(false);
		if (cachedTicketPerPlays[view.toString()] != null && cachedTicketPerPlays[view.toString()].ticket) {
			var cached = cachedTicketPerPlays[view.toString()];
			var cachedTicket = cachedTicketPerPlays[view.toString()].ticket;
			if (isDcGame()) {
				const multipleDrawsachedTicket = cached.multiDraws ?? 2; // 2 DEFAULT VALUE FOR DC GAMES
				const isBoth = cached.drawTime == "BOTH" || cached.drawTime == null;
				const val = {
					value: multipleDrawsachedTicket,
					sliderIndex: multipleDrawsachedTicket === 1 ? 1 : (isBoth ? multipleDrawsachedTicket / 2 : multipleDrawsachedTicket),
				}
				if (cached.drawTime) {
					setDrawTime(cached.drawTime);
				}
				if (cached.advancePlay) {
					setAdvancePlay(cached.advancePlay);
				}
				setTimeout(() => {
					setMultiDraws(val);
				}, 750);
			} else {
				const multipleDrawsachedTicket = cached.multiDraws ?? 1;
				setMultiDraws(multidrawValueToMultidrawObject(multipleDrawsachedTicket, false, false, isR2RGame(gameId)));
			}
			if (cached.ticketOptions) {
				setTicketOptions(cached.ticketOptions);
				if ((cached.ticketOptions ?? []).find((entry) => entry.id === 'JTJ')) {
					setDisableManualInput(true);
				} else {
					setDisableManualInput(false);
				}
			}
			return cachedTicket;
		} else {
			if (isDcGame()) {
				setDrawTime(DRAW_TIMES[2].value);
				setAdvancePlay(ADVANCE_PLAYS[0].value);
				setTimeout(() => {
					setMultiDraws({ value: 2, sliderIndex: 1}); // DEFAULT FOR DC GAMES
				}, 750);
			} else {
				setMultiDraws({ value: 1, sliderIndex: 1}); // DEFAULT FOR OTHER GAMES
			}
			setTicketOptions([]);
			return ticketFactory.createDefault({ gameId, config });
		}
	}

	const handleDailyDouble = (tic) => {
		if (isR2RGame(gameId)) {
			if (tic && tic.boards.length > 0 && tic.boards[0].options?.length > 0) {
				const dailyDoubleOption = tic.boards[0].options.find((e) => e.id == "DAILY DOUBLE");
				if (dailyDoubleOption) {
					setMultiDraws({value: 2, sliderIndex: 2});
				}
			}
		}
	}

	const renderNumericalGameView = () => {
		switch (currentView) {
			case NUMERICAL_GAME_VIEW.MANUEL_PLAY:
				return (
					<ManualPlayView
						gameId={gameId}
						config={config}
						ticket={ticket}
						setTicket={(value) => {
							handleDailyDouble(value);
							setTicket(value);
						}}
						disableInput={disableManualInput}
						quickPick={quickPick}
					/>
				);
			case NUMERICAL_GAME_VIEW.QUICK_PLAY:
				return (
					<QuickPlayView
						gameId={gameId}
						config={config}
						ticket={ticket}
						setTicket={(value) => {
							handleDailyDouble(value);
							setTicket(value);
						}}
						setMultidraws={(newValue) =>  {
							if (isDcGame() && newValue.multipleDraws && newValue.drawTime) {
								setDrawTime(newValue.drawTime);
								setTimeout(() => {
									setMultiDraws(multidrawValueToMultidrawObject(newValue.multipleDraws, true, newValue.drawTime == "BOTH"));
								}, 750);
							} else {
								setMultiDraws(multidrawValueToMultidrawObject(newValue, false, false, isR2RGame(gameId)));
							}
						}}
						setTicketOptions={setTicketOptions}
						setDisableInput={setDisableManualInput}
						disableInput={disableManualInput}
						quickPickIndexSelected={quickPickIndexSelected}
						setQuickPickIndexSelected={(e) => { setQuickIndexSelected(e) }}
					/>
				);
			case NUMERICAL_GAME_VIEW.SYSTEM_PLAY:
				return <></>;
			case NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS:
				return (
					<FavoritePayslipsView
						gameId={gameId}
						config={config}
						ticket={ticket}
						setTicket={(value) => {
							handleDailyDouble(value);
							setTicket(value);
							if (isDcGame()) {
								if (value && value.extraOptions && value.extraOptions.length > 0) {
									setDrawTime(value.extraOptions[0]);
									if (value.multipleDraws) {
										if (value.extraOptions[0] == "BOTH") {
											setTimeout(() => {
												setMultiDraws({
													value: value.multipleDraws,
													sliderIndex: value.multipleDraws == 1 ? 1 : value.multipleDraws / 2
												});
											}, 750);
										} else {
											setTimeout(() => {
												setMultiDraws({value: value.multipleDraws, sliderIndex: value.multipleDraws});
											}, 750);
										}
									}
								}
							}
						}}
						selectedFavoriteTicket={selectedFavoriteTicket}
						setSelectedFavoriteTicket={setSelectedFavoriteTicket}
						setMultidraws={(newValue) =>  {
							if (!isDcGame()) {
								setMultiDraws(multidrawValueToMultidrawObject(newValue, false, false, isR2RGame(gameId)));						
							}
						}}
						setTicketOptions={setTicketOptions}
						setDisableInput={setDisableManualInput}
						disableInput={disableManualInput}
						isModified={isModified}
						setIsModified={setIsModified}
						isScreenFocused={isScreenFocused}
					/>
				);
		}
	};

	const saveCurrentTicketPerPlay = () => {
		if (ticket) {
			var temp = cachedTicketPerPlays;
			if (isDcGame()) {
				temp[currentView.toString()] = {
					ticket: ticket,
					ticketOptions: ticketOptions,
					multiDraws: multiDraws.value,
					drawTime: drawTime,
					advancePlay: advancePlay
				};
			} else {
				temp[currentView.toString()] = {
					ticket: ticket,
					ticketOptions: ticketOptions,
					multiDraws: multiDraws.value
				};
			}
			setCachedTicketPerPlays(temp);
		}
	}

	const resetTicket = () => {
		setDisplayTabs(false);
		config = gameSettings.getConfigForGame({ gameId: gameId });
		const newT = ticketFactory.createDefault({ gameId, config });
		setTicket(Object.create(newT));
		var temp = {
			"MANUEL_PLAY": null,
			"QUICK_PLAY": null,
			"SYSTEM_PLAY": null,
			"FAVORITE_PAYSLIPS": null
		};
		temp[currentView.toString()] = {ticket: newT};
		setCachedTicketPerPlays(temp);
		setSelectedFavoriteTicket(null);
		setCurrentCartItem(null);
		setQuickIndexSelected(null);
		if (isDcGame()) {
			setMultiDraws(multidrawValueToMultidrawObject(2, true, true));
		} else {
			setMultiDraws(multidrawValueToMultidrawObject(1, false, false, isR2RGame(gameId)));
		}
		setDisableTicketSubmit(false);
		setTicketOptions([]);
		setDisableManualInput(false);
		setIsModified(false);
		setTimeout(() => {
			setTicket(Object.create(ticketFactory.createDefault({ gameId, config })));
		}, 500);
		if (isDcGame()) {
			setDrawTime(DRAW_TIMES[2].value);
			setAdvancePlay(ADVANCE_PLAYS[0].value);
		}
		setTimeout(() => {
			setDisplayTabs(true);
		}, 800);
	};

	const [execPlayCoupon] = useMutation(ApiClient.playCoupon, {
		onMutate: () => {
			setDisableTicketSubmit(true);
		},
		onSuccess: (data) => {
			resetTicket();
			setShowBuyConfirmationModal(false);
			setTimeout(() => {
				setShowBuyMessageModal(true);
			}, 1000);
			crashlytics().log('coupon_played');
			setSerialNumber(data?.response?.serialNumber);
		},
		onError: (error: AxiosError<any>) => {
			if (error.response?.data?.error?.errorMessage.error) {
				mobxStore.setGlobalToast({
					mode: 'danger',
					message: error.response?.data?.error?.errorMessage.error.errorMessage,
					fromModal: true,
				});
			}
			setDisableTicketSubmit(false);
			crashlytics().log('error_while_coupon_play');
		},
	});

	const [verifyCoupon] = useMutation(ApiClient.verifyCoupon, {
		onMutate: () => {
			setVerifyTicketObj(null);
		},
		onSuccess: (data) => {
			setVerifyTicketObj(data.response);
			setShowBuyConfirmationModal(true);
		},
		onError: (error: AxiosError<any>) => {
			setDisableTicketSubmit(false);
			if (error.response?.data?.error?.errorMessage.error) {
				mobxStore.setGlobalToast({
					mode: 'danger',
					message: error.response?.data?.error?.errorMessage.error.errorMessage,
				});
			}
		},
	});

	const handleCaseFavoriteModified = () => {
		if (currentView == NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS && selectedFavoriteTicket) {
			setIsModified(true);
		}
	}
	// DC LOGICS STARTED

	const isDrawTimeBoth = () => {
		return drawTime == DRAW_TIMES[2].value;
	}

	const getUpdateSliderMaxValue = (adPlay: string, dTime: string) => {
		return utilsGetUpdateSliderMaxValue(adPlay, config.maxNumberOfMultipleDraws / 2);
	}

	const dcticketDrawOffset = () => {
		return isDCTimeZone() ? dcDetailsFromIndex : dcticketDrawOffsetOld();
	}

	const dcticketDrawOffsetOld = () => {
		var offset = dcDetailsFromIndex;
		if (drawTime == "BOTH") {
			offset = offset - 1;
		}
		if (drawTime == "EVE") {
			offset = offset + 1;
		}
		if (drawTime == "MOR") {
			offset = offset - 1;
		}
		return offset < 0 ? 0 : offset;
	}

	// DC LOGICS ENDED

	const getTotalCostDetails = () => {
		return getDCTotalCostDetails(gameId, ticket, config, multiDraws);
	}

	const getBuyNowButtonEnabled = () => {
		return utilsGetBuyNowButtonEnabled(gameId, ticket, ticketOptions);
	}

	const handleTicketBuyNow = async () => {
		if (!isAuthenticated) {
			mobxStore.setShowLoginModal("login");
			return;
		}
		if (!disableTicketSubmit) {
			if (!isR2RGame(gameId)) {
				ticket.addOptions(ticketOptions); // FYI: this will also remove any de-selected option
			}
			// Set Extra game options to ticket object
			let canPlayAlone = ticketOptions.find((entry) => entry.canPlayAlone);
			if (canPlayAlone && canPlayAlone.multipliers[canPlayAlone.value - 1]) {
				// map slider option number as an index that will give us the multiplier value
				const boardMultiplier = canPlayAlone.multipliers[canPlayAlone.value - 1].value;
				// If just jackpot clear boards otherwise for a smaller amount -> ticket.boards.length < boardMultiplier will fail
				if (canPlayAlone.id == "JTJ") {
					var tempJTJTicket = Object.create(ticket);
					// JTJ CASE NEEDS TO REVISIT
					tempJTJTicket.boards = [];
					if (tempJTJTicket.boards.length < boardMultiplier) {
						tempJTJTicket.appendBoards({
							number: boardMultiplier - tempJTJTicket.boards.length,
						}); // -1 because there will always be 1 board entry on a ticket
					}
					tempJTJTicket.quickPick().then(async () => {
						tempJTJTicket.setMultipleDraws(multiDraws.value);
						var exportedTicked = await tempJTJTicket.exportTicket();
						// TO REVISIT
						if (isDcGame()) {
							exportedTicked.participatingDraws.drawOffsets = [dcticketDrawOffset()];
						}
						// END
						verifyCoupon({
							ticket: {
								wager: {
									dbg: [exportedTicked],
								},
								metadata: {},
							},
						});
					});
					return;
				}
				if (ticket.boards.length < boardMultiplier) {
					ticket.appendBoards({
						number: boardMultiplier - ticket.boards.length,
					}); // -1 because there will always be 1 board entry on a ticket
				}
				ticket.quickPick().then(async () => {
					if (isDcGame() && isDrawTimeBoth()) {
						ticket.setMultipleDraws(multiDraws.value / 2);
					} else {
						ticket.setMultipleDraws(multiDraws.value);
					}
					var exportedTicked = await ticket.exportTicket();
					// TO REVISIT
					if (isDcGame()) {
						exportedTicked.participatingDraws.drawOffsets = [dcticketDrawOffset()];
					}
					// END
					verifyCoupon({
						ticket: {
							wager: {
								dbg: [exportedTicked],
							},
							metadata: {},
						},
					});
				});
				return;
			} else {
				var exportedTicked;
				if (isDcGame() && isDrawTimeBoth()) {
					ticket.setMultipleDraws(multiDraws.value / 2);
					exportedTicked = await ticket.exportTicket();
				} else if (isR2RGame(gameId)){
					ticket.setMultipleDraws(multiDraws.value);
					const tempJTJTicket = Object.create(ticket);
					tempJTJTicket.addOptions(ticketOptions);
					exportedTicked = await tempJTJTicket.exportTicket();
				} else {
					ticket.setMultipleDraws(multiDraws.value);
					exportedTicked = await ticket.exportTicket();
				}
				// TO REVISIT
				if (isDcGame()) {
					exportedTicked.participatingDraws.drawOffsets = [dcticketDrawOffset()];
				}
				// END
				verifyCoupon({
					ticket: {
						wager: {
							dbg: [exportedTicked],
						},
						metadata: {},
					},
				});
			}
			setShowBuyConfirmationModal(false);
		} else {
			console.log('nope');
		}
	};

	const range = (start, end) => Array.from(Array(end - start + 1).keys()).map((x) => x + start);

	const handleTicketAddToCart = () => {
		if (ticket) {
			mobxStore.addTicketToCart(
				ticket,
				ticketOptions,
				disableManualInput,
				multiDraws,
				drawTime,
				advancePlay,
				isDcGame() ? dcDetailsFromIndex : null,
				isDcGame() ? dcDetailsToIndex : null,
				isDcGame() ? dcticketDrawOffset() : null,
				isDcGame() ? isDrawTimeBoth() : false
			);
			mobxStore.setGlobalToast({
				mode: 'success',
				message: "Ticket added to your cart",
			});
			navigation.goBack();
			resetTicket();
		}
	};

	const appDataBannerItem = appData?.response?.bannerCollection[0]?.tiles.find(
		(entry) => entry.gameId === gameId.toString()
	);

	if (isAppDataLoading) {
		return <LoadingScreen />;
	}
	
	const scrollViewRef = React.useRef();

	const handleScrollToTop = () => {
		if (scrollViewRef?.current) {
			scrollViewRef.current.scrollTo({ y: 0, animated: true });
		}
	};

	useEffect(()=> {
		handleScrollToTop();
	},[route])

	const enablePowerPlayMM = () => {
		if (showMegaplierConfirmation && showMegaplierConfirmation.gameOption && showMegaplierConfirmation.optionCost) {
			const _ticketOptions = ticketOptions.filter(
				(option) => !option.canPlayAlone,
			);
			setDisableManualInput(false);
			_ticketOptions.push(showMegaplierConfirmation);
			_ticketOptions.push({
				...showMegaplierConfirmation.gameOption,
				perPlaycost: showMegaplierConfirmation.optionCost,
				dperPlaycost: showMegaplierConfirmation.optionCost,
			});
			setTicketOptions(_ticketOptions);
			ticket.addOptions(ticketOptions);
			setTicket(Object.create(ticket));
			setShowMegaplierConfirmation(null);
		} else {
			setShowMegaplierConfirmation(null);
		}
	}

	const jackpotDisplay = () => {
		var text: string = (appData?.response?.menuGamesLists?.lotteryListOverview?.games?? []).find((e) => Number(e.gameId) == gameId)?.jackpotText ?? item?.jackpotText ?? config.jackpotReplacement;
		if (text.endsWith(".00")) {
			text = text.substring(0, text.length - 3);
		}
		return text;
	}

	return (
		<React.Fragment>
			<Layout>
				<ScrollView contentInsetAdjustmentBehavior="automatic" ref={scrollViewRef}>
					<View style={{ paddingVertical: 20, paddingHorizontal: 15 }}>
						<BPageHeader
							title="Lottery games"
							onPress={() => {
								navigation.goBack();
							}}
							hideCloseIcon
						/>

						{/*  */}
						<TransparentContainer noPadding>
							<LinearGradient
								colors={[
									config.gameColor,
									config.gameColor,
									config.gameBackgroundColor,
								]}
								start={{ x: 0, y: 0 }}
								end={{ x: 1, y: 0 }}
								style={{
									...GLOBAL_STYLE.flex1,
									borderTopLeftRadius: 15,
									borderTopRightRadius: 15,
									position: 'relative',
								}}>
								<View style={{top: 0.0, right: 0.0, flexDirection: 'row'}}>
									<View style={{flex: 1, alignItems: "flex-end", marginTop: 10}}>
										<InfoButton onPress={() => setShowGameInfoModal(true) } />
									</View>
									<SizedBox width={25} />
								</View>

								<View style={{ padding: 15, paddingTop: -10 }}>
									<BImage
										source={{ uri: config.gameLogo }}
										style={{
											height: 78,
											width: 200,
											marginTop: 10,
											resizeMode: 'contain',
											alignSelf: 'center',
										}}
									/>
									<SizedBox height={10} />

									{/* ESTIMATED JACKPOT AMOUNT */}
									{(isPowerBall(gameId) || isMegaMillion(gameId)) && (
										<Text style={{color: "white", fontSize: 15, fontWeight:"500", paddingBottom: 5, paddingTop: 5, textAlign: "center", textTransform: "uppercase"}}>
											{"Estimated Jackpot Amount"}
										</Text>
									)}

									<Text
										style={{
											...GS.FF_PoppinsSemiBold,
											fontSize: 32,
											lineHeight: 42,
											textAlign: 'center',
											color: 'white',
										}}>
										{jackpotDisplay()}
									</Text>

									{gameFutureDraws?.response.draws.items[0].draw.drawDate && (
										<View style={styles.inlineText}>
											<Text
												style={[
													styles.textSmall,
													styles.textBold,
													GS.txtWhite,
												]}>
												Next draw:
											</Text>
											<SizedBox width={3.5} />
											<Text style={[styles.textSmall, GS.txtWhite]}>
												{Moment.unix(
													gameFutureDraws?.response.draws.items[0].draw
														.drawDate as number,
												).format('dddd DD/MM/yyyy hh:mm A')}
											</Text>
										</View>
									)}

									{/* DRAW DAYS */}
									<View style={{...styles.inlineText, marginStart:12, marginEnd: 12}}>
										<Text
											style={[styles.textSmall, styles.textBold, GS.txtWhite]}>
											Draw days:
											<Text style={{...styles.textSmall, color: "white", fontFamily: 'Poppins-Regular'}}>
												{" "}{playDays.length === 7 ||
												playDays.length === 0
													? 'EVERYDAY'
													: playDays.join(' | ')}
											</Text>
										</Text>
										<SizedBox width={3.5} />
									</View>

									{gameFutureDraws?.response.draws.items[0].draw.drawDate && (
										<View style={{ marginTop: 15 }}>
											<Text
												style={[
													styles.textSmall,
													styles.textBold,
													GS.txtWhite,
													GS.txtCenter,
												]}>
												Time until draw
											</Text>
											<SizedBox height={12.5} />

											{/* TIMER */}
											<BTimer
												expiryDate={Moment.unix(
													gameFutureDraws?.response.draws.items[0].draw
														.drawDate,
												)}
												onExpired={() => {
													if (isR2RGame(gameId)) {
														refetchGameFutureDraws();
														refetchGameLastDraw();
													}
												}}
											/>
										</View>
									)}

									{/* RECENT WINNING NUMBERS */}
									<View>
										<Text
											style={{
												...GLOBAL_STYLE.FF_PoppinsSemiBold,
												...GLOBAL_STYLE.txtWhite,
												textTransform: 'uppercase',
												textAlign: 'center',
												marginTop: 15,
											}}>
											Recent Winning Numbers
										</Text>

										{lotteryGame &&
											gameLastDraw?.response?.last?.items[0]?.draw?.results && (
												<GameCardDrawResults
													gameSettings={lotteryGame}
													results={gameLastDraw.response.last.items[0].draw.results}
												/>
											)}
										{lotteryGame &&
											gameLastDraw &&
											lotteryGame.rules?.availableGameTypes?.length > 0 &&
											gameLastDraw.response.last.items[0].draw.results[
												lotteryGame.rules?.panels[0].boards.length
											] && (
											<View>
												<SizedBox height={5} />
												<Text style={{ color: 'white', textAlign: 'center' }}>
													{`${
														lotteryGame.rules.availableGameTypes[0].gameTypeName
													} ${
														gameLastDraw.response.last.items[0].draw.results[
															lotteryGame.rules.panels[0].boards.length
														]
													}`}
												</Text>
											</View>
										)}

										{
											isR2RGame(gameId) &&
										 	lotteryGame &&
											gameLastDraw &&
											lotteryGame.rules?.availableGameTypes?.length > 0 &&
											lotteryGame.rules?.panels[0].boards.length > gameLastDraw.response.last.items[0].draw.results.length &&
											gameLastDraw.response.last.items[0].draw.results[
												gameLastDraw.response.last.items[0].draw.results.length - 1
											] && (
											<View>
												<SizedBox height={5} />
												<Text style={{ color: 'white', textAlign: 'center' }}>
													{`${
														lotteryGame.rules.availableGameTypes[0].gameTypeName
													} ${
														gameLastDraw.response.last.items[0].draw.results[
															gameLastDraw.response.last.items[0].draw.results.length - 1
														]
													}`}
												</Text>
											</View>
										)}
									</View>
								</View>

								{/*  */}
								<View style={[GS.row, GS.justifyBetween]}>
									<OptionSelectable
										isFirst
										isActive={currentView === NUMERICAL_GAME_VIEW.MANUEL_PLAY}
										title="Manual play"
										icon={icons.manualplay_symbol}
										onPress={() => {
											saveCurrentTicketPerPlay();
											setCurrentView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
											const cachedTicket = getCachedTicketByView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
											setTicket(cachedTicket);
										}}
										activeTabColor={getTabColor(gameId, appData)?.tabActiveColor}
										inActiveTabColor={getTabColor(gameId, appData)?.tabInactiveColor}
									/>
									<OptionSelectable
										title="Quick play"
										isActive={currentView === NUMERICAL_GAME_VIEW.QUICK_PLAY}
										icon={icons.quickplay_symbol}
										onPress={() => {
											saveCurrentTicketPerPlay();
											setCurrentView(NUMERICAL_GAME_VIEW.QUICK_PLAY);
											const cachedTicket = getCachedTicketByView(NUMERICAL_GAME_VIEW.QUICK_PLAY);
											setTicket(cachedTicket);
										}}
										activeTabColor={getTabColor(gameId, appData)?.tabActiveColor}
										inActiveTabColor={getTabColor(gameId, appData)?.tabInactiveColor}
									/>
									<OptionSelectable
										isLast
										isActive={
											currentView === NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS
										}
										disabled={!isAuthenticated}
										title="Favorite payslips"
										icon={icons.fav_symbol}
										onPress={() => {
											setIsModified(false);
											saveCurrentTicketPerPlay();
											setCurrentView(NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS);
											const cachedTicket = getCachedTicketByView(NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS);
											setTicket(cachedTicket);
										}}
										activeTabColor={getTabColor(gameId, appData)?.tabActiveColor}
										inActiveTabColor={getTabColor(gameId, appData)?.tabInactiveColor}
									/>
								</View>
							</LinearGradient>

							{/*  */}
							<View>{displayTabs ? renderNumericalGameView() : <><ActivityIndicator size={50} color={'white'} /></>}</View>
						</TransparentContainer>

						{/* ADVANCE PLAY */}
						{isDcGame() &&  (
							<TransparentContainer>
								<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
									Advance play
								</Text>
								<View style={[GS.row, GS.flexWrap, GS.alignCenter]}>
									{ADVANCE_PLAYS.map((item, index) => (
										<View
											key={index}
											style={{
												width: '33.3%',
												marginBottom: 12.5,
												paddingRight: 20,
											}}>
											<BToggle
												value={item.value === advancePlay}
												label={item.label}
												onValueChange={() => {
													setAdvancePlay(item.value);
													ticket.setDaySelection(item.value);
													setTicket(Object.create(ticket));
												}}
											/>
										</View>
									))}
								</View>
							</TransparentContainer>
						)}

						{/* DRAW TIME */}
						{isDcGame() && (
							<TransparentContainer>
								<Text style={{ marginBottom: 15, ...styles.containerTitle }}>
									Draw time
								</Text>
								<View style={[GS.row, GS.alignCenter, GS.mb1]}>
									{DRAW_TIMES.map((item, index) => (
										<View style={{ marginRight: 20 }} key={index}>
											<BToggle
												value={item.value === drawTime}
												label={item.label}
												onValueChange={() => {
													setQuickIndexSelected(null);
													handleCaseFavoriteModified();
													setDrawTime(item.value);
													ticket.setTimePeriod(item.value);
													// TO CHECK - UPDATE TICKET MULTIPLE DRAWS
													const newValue = sliderIndexToMultidrawObject(multiDraws.sliderIndex, isDcGame(), item.value == DRAW_TIMES[2].value);
													setMultiDraws(newValue);
													ticket.setMultipleDraws(newValue.value);
													setTicket(Object.create(ticket));
												}}
											/>
										</View>
									))}
								</View>
							</TransparentContainer>
						)}

						{/* MULTI DRAWS */}
						<TransparentContainer>
							<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
								Multi {isR2RGame(gameId) ? "Races" : "Draws"}
							</Text>
							<View style={[GS.row, GS.alignCenter]}>
								<Text style={[GS.FF_PoppinsSemiBold, { display: 'flex' }]}>
									{isDcGame() && !dcMultipleDrawsMaxValue ? "" : config.minNumberOfMultipleDraws}
								</Text>
								<View style={[GS.flex1, GS.px2, GS.positionRelative]}>
									{!isDcGame() && !isR2RGame(gameId) && (
										<CustomTrackSlider
											range={range}
											maximumValue={config.maxNumberOfMultipleDraws / 2 + 1}
										/>
									)}
									{/* DC GAME SLIDER */}
									{ isDcGame() && (
										dcMultipleDrawsMaxValue ? (
											<Slider
												animationType="spring"
												animateTransitions={false}
												minimumValue={config.minNumberOfMultipleDraws}
												step={1}
												maximumValue={dcMultipleDrawsMaxValue}
												value={multiDraws.sliderIndex}
												trackClickable={false}
												minimumTrackTintColor="rgba(0,0,0,.25)"
												maximumTrackTintColor="rgba(0,0,0,.25)"
												onValueChange={(value) => {
													handleCaseFavoriteModified();
													const newValue = sliderIndexToMultidrawObject(value[0], isDcGame(), isDrawTimeBoth());
													setMultiDraws(newValue);
													ticket.setMultipleDraws(newValue.value);
												}}
												trackStyle={styles.trackSlider}
												renderThumbComponent={() => (
													<View style={styles.thumbSlider}>
														<Text
															style={{
																fontSize: 10,
																...GS.FF_PoppinsSemiBold,
																color: 'white',
															}}>
															{isDcGame() ? multiDraws.sliderIndex : multiDraws.value}
														</Text>
													</View>
												)}
											/>
										) : (
											<>
												<Text style={{ marginLeft: -8, ...styles.containerTitle, fontSize: 13 }}>
												Only one Day is available
												</Text>
											</>
										))
									}

									{/* NOT DC GAME SLIDER */}
									{!isDcGame() && (
										<Slider
											disabled={isSliderDisabled}
											animationType="spring"
											animateTransitions={false}
											minimumValue={config.minNumberOfMultipleDraws}
											step={1}
											maximumValue={isR2RGame(gameId) ? config.maxNumberOfMultipleDraws : config.maxNumberOfMultipleDraws / 2 + 1}
											value={multiDraws.sliderIndex}
											trackClickable={false}
											minimumTrackTintColor="rgba(0,0,0,.25)"
											maximumTrackTintColor="rgba(0,0,0,.25)"
											onValueChange={(value) => {
												handleCaseFavoriteModified();
												const newMultiDrawsObject = sliderIndexToMultidrawObject(value[0], false, false, isR2RGame(gameId));
												setMultiDraws(newMultiDrawsObject);
												ticket.setMultipleDraws(newMultiDrawsObject.value);
											}}
											trackStyle={styles.trackSlider}
											renderThumbComponent={() => (
												<View style={{...styles.thumbSlider, backgroundColor: isSliderDisabled ? "#D3D3D3" : CONSTANT_COLOR.primary}}>
													<Text
														style={{
															fontSize: 10,
															...GS.FF_PoppinsSemiBold,
															color: 'white',
														}}>
														{multiDraws.value}
													</Text>
												</View>
											)}
										/>
									)}
								</View>
								<Text
									style={[
										GS.FF_PoppinsSemiBold,
										{
											display: 'flex',
										},
									]}>
									{(
										isDcGame() && dcMultipleDrawsMaxValue ? dcMultipleDrawsMaxValue :
										(isDcGame() && !dcMultipleDrawsMaxValue) ? "" :
										config.maxNumberOfMultipleDraws
									)}
								</Text>
							</View>
						</TransparentContainer>

						{/* TICKET OPTIONS */}
						{config.availableOptions.map((gameOption, i) => {
							const selectedGameOptionObject = ticketOptions.find(
								(entry) => entry.id === gameOption.id,
							);

							const gameOptionIsSelected =
								selectedGameOptionObject !== undefined;
							let boardColumns =
								config.minNumberOfBoards * config.board.panels.length;
							let optionCost = boardColumns;

							if (gameOption.operator === 'x') {
								optionCost *= gameOption.operand;
							} else if (gameOption.operator === '+') {
								optionCost += gameOption.operand;
							}

							if (gameOption.multipliers.length > 0) {
								let defaultOptionMultiplier = gameOption.multipliers.find(
									(entry) => entry.isDefault,
								);
								if (defaultOptionMultiplier) {
									if (gameOption.operator === 'x') {
										optionCost *= defaultOptionMultiplier.value;
									} else if (gameOption.operator === '+') {
										optionCost += defaultOptionMultiplier.value;
									}
								}
							}
							return (
								<TransparentContainer key={i}>
									<View style={[GS.row, GS.alignCenter]}>
										<View style={{ flexGrow: 1 }}>
											<Text style={styles.containerTitle}>
												{gameOption.name}
											</Text>
										</View>
										<View style={[GS.row, GS.alignCenter]}>
											<Text
												style={{
													fontSize: 12,
													...GS.FF_PoppinsSemiBold,
													textTransform: 'uppercase',
												}}>
												{`${isR2RGame(gameId) ? "": "$"}`}
												{gameOption.shortdescr.replace(
													'{cost}',
													optionCost.toFixed(2),
												)}
											</Text>
											<SizedBox width={10} />
											<BSwitch
												onValueChange={(v) => {
													handleCaseFavoriteModified();
													if (v) {
														if (gameOption.canPlayAlone) {
															if (gameOption.id == "JTJ") {
																// ASK FOR CONFIRMATION
																setShowJTJConfirmationModal([
																	{
																		...gameOption,
																		perPlaycost: optionCost,
																		dperPlaycost: optionCost,
																		value: 1,
																	},
																]);
															} else {
																setTicket(
																	ticketFactory.createDefault({ gameId, config }),
																);
																setDisableManualInput(true);
																setTicketOptions([
																	{
																		...gameOption,
																		perPlaycost: optionCost,
																		dperPlaycost: optionCost,
																		value: 1,
																	},
																]);
															}
														} else {
															if (gameOption.id == "PowerPlay" && isMegaMillion(gameId) && isJTJ) {
																// CONFIRMATION
																setShowMegaplierConfirmation({
																	gameOption: gameOption,
																	optionCost: optionCost
																});
															} else {
																// remove any other selected canPlayAlone options
																const _ticketOptions = ticketOptions.filter(
																	(option) => !option.canPlayAlone,
																);
																setDisableManualInput(false);

																_ticketOptions.push({
																	...gameOption,
																	perPlaycost: optionCost,
																	dperPlaycost: optionCost,
																});
																setTicketOptions(_ticketOptions);
																ticket.addOptions(ticketOptions);
																setTicket(Object.create(ticket));
															}
														}
													} else {
														if (gameOption.id == "JTJ") {
															resetTicket();
														} else {
															let optionToRemove = ticketOptions.find(
																(entry) => entry.id === gameOption.id,
															);
															if (optionToRemove) {
																if (optionToRemove.canPlayAlone) {
																	setDisableManualInput(false);
																}
																let optionIndex =
																	ticketOptions.indexOf(optionToRemove);
																ticketOptions.splice(optionIndex, 1);
																setTicketOptions(ticketOptions);
																ticket.addOptions(ticketOptions);
																setTicket(Object.create(ticket));
															}
														}
													}
												}}
												value={gameOptionIsSelected}
												size="small"
											/>
										</View>
									</View>
									{gameOptionIsSelected &&
										gameOption.multipliers.length > 0 && (
											<Slider
												minimumValue={1}
												step={1}
												maximumValue={gameOption.multipliers.length}
												value={selectedGameOptionObject.value || 1}
												trackClickable={false}
												minimumTrackTintColor="rgba(0,0,0,.25)"
												maximumTrackTintColor="rgba(0,0,0,.25)"
												onValueChange={(value) => {
													handleCaseFavoriteModified();
													selectedGameOptionObject.perPlaycost =
														value[0] * selectedGameOptionObject.dperPlaycost;
													selectedGameOptionObject.value = value[0];
													ticketOptions[
														ticketOptions.indexOf(selectedGameOptionObject)
													] = selectedGameOptionObject;
													setTicketOptions([...ticketOptions]);
												}}
												trackStyle={styles.trackSlider}
												renderThumbComponent={() => (
													<View style={styles.thumbSlider}>
														<Text
															style={{
																fontSize: 13,
																...GS.FF_PoppinsSemiBold,
																color: 'white',
															}}>
															{
																ticketOptions[
																	ticketOptions.indexOf(
																		selectedGameOptionObject,
																	)
																].value
															}
														</Text>
													</View>
												)}
											/>
										)}
								</TransparentContainer>
							);
						})}

						{/* DRAWS */}
						<TransparentContainer>

							{!isDcGame() && (
								<>
									<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
										Draws
									</Text>
									<BListItem
										label="From"
										value={moment
											.unix(
												gameFutureDraws?.response.draws.items[0].draw
													.drawDate as number,
											)
											.format('MM/DD/yyyy hh:mm A')}
										bolder
									/>
									{gameFutureDraws?.response.draws.items[multiDraws.value - 1] && (
										<BListItem
											label="To"
											value={moment
												.unix(
													gameFutureDraws?.response.draws.items[
														multiDraws.value - 1
													].draw.drawDate,
												)
												.format('MM/DD/yyyy hh:mm A')}
											bolder
										/>
									)}
								</>
							)}
							{isDcGame() && dcDetailsFrom && dcDetailsTo && (
								<>
									<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
										Draws
									</Text>
									<BListItem
										label="From"
										value={dcDetailsFrom}
										bolder
									/>
									<BListItem
										label="To"
										value={dcDetailsTo}
										bolder
									/>
								</>
							)}

							<BListItem
								label="No of draws"
								value={`X${multiDraws.value}`}
								bolder
							/>

							<Text style={{ marginVertical: 10, ...styles.containerTitle }}>
								Price details
							</Text>
							{
								(selectedFavoriteTicket && !isModified && currentView === NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS) ? (
									<BListItem
										key="fav_key"
										label=" FAVORITE:"
										value={selectedFavoriteTicket.description}
										bolder
									/>
								) : (
									<></>
								)
							}
							{/* DC GAMES */}
							{isDcGame() && (
								<>
									{getTotalCostDetails().plays.map((entry, i, data) => {
										return (
											<BListItem
												key={i}
												label={entry.label}
												value={`$${entry.price.toFixed(2)}`}
												bolder
											/>
										);
									})}
									<BListItem
										key={"total_grand"}
										label={config.gameName}
										value={`$${getTotalCostDetails().grandTotal.toFixed(2)}`}
										bolder
									/>
								</>
							)}
							{/* NOT DC GAMES */}
							{!isDcGame() && (
								<>
									{ticketOptions.find((option) => option.id === 'JTJ') == null && (
										isR2RGame(gameId) ? (
											<BListItem
												label={`${
													ticketActiveBoards > 1 ? ticketActiveBoards + ' X ' : ''
												} ${config.gameName}`}
												value={`$${(ticket.calculateCost()).toFixed(2)}`}
												bolder
											/>
										) : (
											<BListItem
												label={`${
													ticketActiveBoards > 1 ? ticketActiveBoards + ' X ' : ''
												} ${config.gameName}`}
												value={`$${(
													(ticketActiveBoards || 1) * config.columnPrice
												).toFixed(2)}`}
												bolder
											/>
										)
									)}
									{ticketOptions.map((entry, i) => {
										const option = config.availableOptions.find(
											(configEntry) => entry.id === configEntry.id,
										);
										if (!option) {
											return;
										}
										if (option.id === 'JTJ') {
											return (
												<BListItem
													key={i}
													label={option.name}
													value={`${
														multiDraws.value
													} x $${entry.perPlaycost.toFixed(2)}`}
													bolder
												/>
											);
										} else if (isR2RGame(gameId)) {
											return (
												<BListItem
													key={i}
													label={option.name}
													value={`$${(ticket.calculateCost()).toFixed(2)}`}
													bolder
												/>
											);
										} else {
											return (
												<BListItem
													key={i}
													label={option.name}
													value={`${
														ticket.boards.length
													} x $${entry.perPlaycost.toFixed(2)}`}
													bolder
												/>
											);
										}
									})}
								</>
							)}

							<BSeparator
								spaceless
								style={{ marginTop: 15, marginBottom: 10 }}
							/>
							<BListItem
								label="Total"
								value={
									!getBuyNowButtonEnabled() ? "$0.00":
									(isDcGame() ? 
									`$${getTotalCostDetails().grandTotal.toFixed(2)}` 
									:
									isR2RGame(gameId) ? `$${(ticket.calculateCost() * (isR2RBonusEnabled ? 2 : 1)).toFixed(2)}`
									: `$${((canDisplayTotal()) ? ticketTotal : 0).toFixed(2)}`)
								}
								size="extraLarge"
								bolder
							/>
							<BSeparator
								spaceless
								style={{ marginTop: 10, marginBottom: 25 }}
							/>

							{(isR2RGame(gameId) ? ticket.calculateCost() > config.maxBetAmount : ticketTotal > config.maxBetAmount) && (
								<Text style={{ marginBottom: 10, ...styles.containerTitle, color: "red", fontSize: 14 }}>
									{`Your participation cost is higher than the maximum allowed ($${config.maxBetAmount}). Please change your play selections and try again.`}
								</Text>
							)}

							{/* BUY NOW BUTTON */}
							<BButton
								title="Buy now"
								onPress={handleTicketBuyNow}
								mode="danger"
								disabled={
									(ticketOptions.find((e) => e.id == "JTJ")) ? false
									:
									isR2RGame(gameId) ?
									!(getBuyNowButtonEnabled() && ticket.calculateCost() < config.maxBetAmount && ticket.calculateCost() >= 1)
									:
									!(getBuyNowButtonEnabled() && ticketTotal < config.maxBetAmount)
								}
							/>
							<SizedBox height={15} />

							{/* ADD TO CART BUTTON */}
							<BButton
								title={currentCartItem ? "Update cart" : "Add to cart"}
								onPress={() => {
									if (currentCartItem && currentCartItem.ticket) {
										updateCart();
									} else {
										handleTicketAddToCart();
									}
								}}
								disabled={
									isR2RGame(gameId) ?
									!(getBuyNowButtonEnabled() && ticket.calculateCost() < config.maxBetAmount && ticket.calculateCost() >= 1)
									:
									!(getBuyNowButtonEnabled() && ticketTotal < config.maxBetAmount)
								}
								mode="primary"
							/>
							<SizedBox height={15} />

							{/* ADD TO FAVORITES */}
							<BButton
								title={currentView == NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS && selectedFavoriteTicket ? "Update favorite" : "Add to favorites"}
								onPress={() => {
									if (isDcGame() && isDrawTimeBoth()) {
										ticket.setMultipleDraws(multiDraws.value / 2);
									} else {
										ticket.setMultipleDraws(multiDraws.value);
									}
									setShowFavoriteNumberModal(true)
								}}
								disabled={
									isR2RGame(gameId) ?
									(!ticketCanBeSubmited ||
										disableManualInput ||
										!(getBuyNowButtonEnabled() && ticket.calculateCost() < config.maxBetAmount && ticket.calculateCost() >= 1) ||
										isJTJ)
									:
									(!ticketCanBeSubmited ||
									disableManualInput ||
									!(getBuyNowButtonEnabled() && ticketTotal < config.maxBetAmount) ||
									isJTJ)
								}
							/>
							<SizedBox height={20} />
						</TransparentContainer>
					</View>
					<Footer/>
				</ScrollView>
				{/* GENERATE QR CODE MODAL */}
				{showGenerateQrCodeModal && (
					<GenerateQrCodeModal
						isVisible={showGenerateQrCodeModal}
						onClose={() => setShowGenerateQrCodeModal(false)}
					/>
				)}

				{/* BUY CONFIRMATION MODAL */}
				{showBuyConfirmationModal && (
					<ConfirmationModal
						isVisible={showBuyConfirmationModal}
						onClose={() => setShowBuyConfirmationModal(false)}
						logo={config.gameLogo}
						config={config}
						ticket={verifyTicketObj?.wager.dbg[0]}
						cost={verifyTicketObj?.wager.dbg[0].cost}
						participatingDraws={
							verifyTicketObj?.wager.dbg[0].participatingDraws
						}
						onBuy={() => {
							if (verifyTicketObj) {
								execPlayCoupon({ ticket: verifyTicketObj });
							}
						}}
						isDCGame={isDcGame()}
					/>
				)}

				{/* MESSAGE MODAL */}
				{showBuyMessageModal && (
					<MessageModal
						isVisible={showBuyMessageModal}
						onClose={() => {
							setShowBuyMessageModal(false);
							setVerifyTicketObj(null);
							setSerialNumber(null);
							handleScrollToTop();
						}}
						logo={config.gameLogo}
						ticket={verifyTicketObj?.wager.dbg[0]}
						cost={verifyTicketObj?.wager.dbg[0].cost}
						participatingDraws={
							verifyTicketObj?.wager.dbg[0].participatingDraws
						}
						serialNumber={serialNumber}
						config={config}
					/>
				)}

				{/* JTJ CONFIRMATION TOGGLE */}
				{showJTJConfirmationModal && (
					<JTJConfirmationModal
						isVisible={showJTJConfirmationModal != null}
						onNo={() => {
							setShowJTJConfirmationModal(null);
						}}
						onYes={() => {
							setTicket(
								ticketFactory.createDefault({ gameId, config }),
							);
							setDisableManualInput(true);
							setTicketOptions(showJTJConfirmationModal);
							setShowJTJConfirmationModal(null);
						}}
					/>
				)}

				<AddToFavoritesModal
					ticket={ticket}
					ticketOptions={ticketOptions}
					isVisible={showFavoriteNumberModal}
					favoriteTicket={selectedFavoriteTicket}
					onClose={() => setShowFavoriteNumberModal((v) => !v)}
					onSuccess={() => {
						setIsModified(false);
						setShowSuccessMessage(`SUCCESSFULLY ${selectedFavoriteTicket ? 'UPDATED' : 'ADDED'} YOUR FAVORITE!`);
						setTimeout(() => {
							setShowSuccessAddFavorite(true);
						}, 750);	
					}}
					fromNumericalGame={true}
				/>

				{showSuccessAddFavorite && (
					<GenericSuccessModal
						isVisible={showSuccessAddFavorite}
						message={showSuccessMessage}
						onClose={() => {
							setShowSuccessMessage("");
							setShowSuccessAddFavorite(false);
						}}
					/>
				)}

				{appDataBannerItem && showGameInfoModal && (
					<ViewNumericalGameInfoModal
						isVisible={showGameInfoModal}
						onClose={() => {
							setShowGameInfoModal((v) => !v);
						}}
						game={appDataBannerItem}
					/>
				)}

				{showMegaplierConfirmation != null && isMegaMillion(gameId) && (
					<MegaPlierConfirmationModal
						isVisible={showMegaplierConfirmation != null}
						onPositive={() => {
							enablePowerPlayMM();
						}}
						onNegative={() => {
							setShowMegaplierConfirmation(null);
						}}
						onClose={() => {
							setShowMegaplierConfirmation(null);
						}}
					/>
				)}
				
			</Layout>
		</React.Fragment>
	);
};

interface IJTJConfirmationModal {
	isVisible: boolean;
	onNo: () => void;
	onYes: () => void;
}

const JTJConfirmationModal: React.FC<IJTJConfirmationModal> = ({
	isVisible,
	onNo,
	onYes,
}) => {
	return (
		<BModal isVisible={isVisible} onClose={onNo}>
			<React.Fragment>
				<ScrollView showsVerticalScrollIndicator={false}>
					<BModalHeader>
						<Text
							style={[
								GS.txtUpper,
								GS.FF_PoppinsSemiBold,
								GS.txtCenter,
								GS.py1,
								GS.txtWhite,
							]}>
							Selecting Just The Jackpot will reset your current game board. Are you sure you want to continue?
						</Text>
					</BModalHeader>
					<BModalFooter style={[GS.row, GS.justifyCenter]}>
						<BButton
							onPress={onNo}
							title="No"
							type="outlined"
						/>
						<SizedBox width={10} />
						<BButton
							title="Yes"
							onPress={onYes}
							mode="primary"
						/>
					</BModalFooter>
				</ScrollView>
			</React.Fragment>
		</BModal>
	);
};

interface IMegaplierConfirmation {
	isVisible: boolean;
	onClose: () => void;
    onPositive: () => void;
    onNegative: () => void;
}

const MegaPlierConfirmationModal: React.FC<IMegaplierConfirmation> = ({
	isVisible,
	onClose,
    onPositive,
    onNegative
}) => {
	return (
		<BModal isVisible={isVisible} onClose={onClose}>
			<React.Fragment>
				<ScrollView showsVerticalScrollIndicator={false}>
                <BModalHeader>
					<Text
						style={[
							GS.txtUpper,
							GS.FF_PoppinsSemiBold,
							GS.txtXl,
							GS.py1,
							GS.txtWhite,
						]}>
						Confirmation
					</Text>
				</BModalHeader>
                    <View style={[GS.px3, GS.py4]}>
                        <Text
                            style={[GS.txtCenter, GS.txtUpper, GS.txtSm, GS.mb4, GS.txtWhite]}>
                            Selecting Megaplier will turn off Just The Jackpot. Are you sure you want to continue ?
                        </Text>
                    </View>
					<BModalFooter style={[GS.row, GS.justifyCenter]}>
						<BButton							
							title="NO"
							onPress={onNegative}
							mode="primary"
						/>
                        <SizedBox width={8} />
                        <BButton							
							title="YES"
							onPress={onPositive}
							mode="danger"
						/>
					</BModalFooter>
				</ScrollView>
			</React.Fragment>
		</BModal>
	);
};

export default NumericalGameInnerScreen;