railbird-gql/src/screens/video-stack/video-details.tsx

import React from "react";
import {
	ActivityIndicator,
	Keyboard,
	Text,
	TextInput,
	TouchableOpacity,
	TouchableWithoutFeedback,
	View,
} from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
// @ts-ignore
import { useVideoDetails } from "../../component/video/use-video-details";

import { globalInputStyles } from "../../styles";
import { recordStyles as styles } from "./styles";

export default function VideoDetails({ navigation, route }): React.JSX.Element {
	const { mode, videoId } = route.params;
	const {
		sessionName,
		setSessionName,
		gameType,
		setGameType,
		tableSize,
		setTableSize,
		gameTypeOpen,
		setGameTypeOpen,
		tableSizeOpen,
		setTableSizeOpen,
		onGameTypeOpen,
		onTableSizeOpen,
		handleSubmit,
		loading,
		tableSizes,
		gameTypes,
		setGameTypes,
		setTableSizes,
	} = useVideoDetails({ mode, videoId, params: route.params, navigation });

	const dropDownStyles = {
		style: globalInputStyles.dropdownStyle,
	};

	return (
		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
			<View style={styles.container}>
				<Text style={styles.headerText}>
					{mode === "start-video" ? "Record Session" : "Save Session"}
				</Text>
				<View style={globalInputStyles.dropdownContainer}>
					<Text style={globalInputStyles.dropdownTitle}>Session Name</Text>
					<TextInput
						style={globalInputStyles.input}
						placeholder="Session name"
						autoCapitalize="none"
						value={sessionName}
						onChangeText={setSessionName}
					/>
					<Text style={globalInputStyles.dropdownTitle}>Game Type</Text>
					<DropDownPicker
						zIndex={3000}
						zIndexInverse={1000}
						open={gameTypeOpen}
						value={gameType}
						items={gameTypes}
						setOpen={setGameTypeOpen}
						setValue={setGameType}
						setItems={setGameTypes}
						onOpen={onGameTypeOpen}
						{...dropDownStyles}
					/>
					<Text style={globalInputStyles.dropdownTitle}>Table size</Text>
					<DropDownPicker
						zIndex={2000}
						zIndexInverse={2000}
						open={tableSizeOpen}
						value={tableSize}
						items={tableSizes}
						setOpen={setTableSizeOpen}
						setValue={setTableSize}
						setItems={setTableSizes}
						onOpen={onTableSizeOpen}
						{...dropDownStyles}
					/>
				</View>

				<View style={styles.buttonContainer}>
					{mode === "start-video" && (
						<TouchableOpacity
							style={styles.buttonStyle}
							onPress={() => navigation.goBack()}
						>
							<Text style={styles.buttonText}>Back</Text>
						</TouchableOpacity>
					)}
					<TouchableOpacity style={styles.buttonStyle} onPress={handleSubmit}>
						{loading ? (
							<ActivityIndicator color="#fff" />
						) : (
							<Text style={styles.buttonText}>
								{mode === "start-video" ? "Next" : "Save"}
							</Text>
						)}
					</TouchableOpacity>
				</View>
			</View>
		</TouchableWithoutFeedback>
	);
}