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

import * as gql from "railbird-gql";
import React, { useCallback, useState } from "react";
import {
	ActivityIndicator,
	Keyboard,
	Text,
	TextInput,
	TouchableOpacity,
	TouchableWithoutFeedback,
	View,
} from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
// @ts-ignore
import { useCameraPermission } from "react-native-vision-camera";
import { showAlert } from "../../lib/alert-messages";
import { globalInputStyles } from "../../styles";
import { recordStyles as styles } from "./styles";
import { VideoFlowInputParams } from "./video-stack-types";

// TerminateUploadStream

interface VideoDetailsProps {
	navigation: any;
	route?: any;
}

export default function VideoDetails({
	navigation,
	route,
}: VideoDetailsProps): React.JSX.Element {
	const { hasPermission, requestPermission } = useCameraPermission();
	const { mode, videoId } = route.params;
	if (mode === "start-video" && !hasPermission) {
		requestPermission();
	}

	// Initial state values based on mode
	const initialState =
		mode === "save-video" && route.params ? route.params : {};

	// Session name input
	// Should session name be required?
	const [sessionName, setSessionName] = useState<string>(
		initialState.sessionName || "",
	);

	// Game type dropdown
	const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false);
	const [gameType, setGameType] = useState<string | null>(
		initialState.gameType || null,
	);
	const [gameTypes, setGameTypes] = useState([
		{ label: "Free Play", value: "freePlay" },
		{ label: "Straight Pool", value: "straightPool" },
		{ label: "Nine Ball", value: "nineBall" },
	]);
	const onGameTypeOpen = useCallback(() => {
		setTableSizeOpen(false);
	}, []);

	// Table size dropdown
	const [tableSizeOpen, setTableSizeOpen] = useState<boolean>(false);
	const [tableSize, setTableSize] = useState<string>(
		initialState.tableSize || "",
	);
	const [tableSizes, setTableSizes] = useState([
		{ label: `9'`, value: "nineFoot" },
		{ label: `8'`, value: "eightFoot" },
		{ label: "7", value: "sevenFoot" },
	]);
	const onTableSizeOpen = useCallback(() => {
		setGameTypeOpen(false);
	}, []);

	const [TerminateUploadStream, { loading, error }] =
		gql.useTerminateUploadStreamMutation();

	const handleSubmit = async () => {
		if (mode === "start-video" && !hasPermission) {
			return showAlert("camera");
		}

		if (mode === "start-video") {
			const params: VideoFlowInputParams = {
				sessionName: sessionName,
				gameType: gameType,
				tableSize: tableSize,
			};
			navigation.push("Camera", params);
		} else {
			try {
				console.log(videoId, sessionName, tableSize, gameType);
				const res = await TerminateUploadStream({
					variables: {
						videoId: videoId,
						videoName: sessionName,
						tableSize: tableSize,
						gameType: gameType,
					},
				});
				console.log(res);
				navigation.push("Tabs");
			} catch (err) {
				console.error(error);
				return showAlert("terminateUpload");
			}
		}
	};

	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>
	);
}