railbird-gql/screens/video-stack/record.tsx

import React, { useCallback, useState } from "react";
import {
	Keyboard,
	Text,
	TextInput,
	TouchableOpacity,
	TouchableWithoutFeedback,
	View,
} from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import { recordStyles as styles } from "./styles";

interface CameraScreenParams {
	gameType: string;
	tableSize: string;
	tags: Array<string>;
	location: string;
}

// Record Screen
// Precedes Camera.tsx
// Can be made into Modal when ready
export default function RecordScreen({ navigation }): React.JSX.Element {
	// Game type dropdown
	const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false);
	const [gameType, setGameType] = useState<string | null>(null); // This is a dropdown
	const [gameTypes, setGameTypes] = useState([
		{ label: "Free Play", value: "freePlay" },
		{ label: "Straight Pool", value: "straightPool" },
		{ label: "Nine Ball", value: "nineBall" },
	]);
	const onGameTypeOpen = useCallback(() => {
		setTableSizeOpen(false);
		setTagsOpen(false);
	}, []);

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

	// Tags multi-select dropdown
	const [tagsOpen, setTagsOpen] = useState<boolean>(false);
	const [tags, setTags] = useState<Array<string>>([]);
	const [tagsList, setTagsList] = useState([
		{ label: `Tag1`, value: "tag1" },
		{ label: `Tag2`, value: "tag2" },
		{ label: "Tag3", value: "tag3" },
	]);
	const onTagsOpen = useCallback(() => {
		setTableSizeOpen(false);
		setGameTypeOpen(false);
	}, []);

	// Location
	const [location, setLocation] = useState<string>("");

	const handleSubmit = () => {
		// needs to pass info as params or store in a context/state provider
		const params: CameraScreenParams = {
			gameType: gameType,
			tableSize: tableSize,
			tags: tags,
			location: location,
		};
		navigation.push("Camera", params);
	};

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

	return (
		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
			<View style={styles.container}>
				<View style={styles.dropdownContainer}>
					<Text style={styles.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={styles.dropdownTitle}>Table size</Text>
					<DropDownPicker
						zIndex={2000}
						zIndexInverse={2000}
						open={tableSizeOpen}
						value={tableSize}
						items={tableSizes}
						setOpen={setTableSizeOpen}
						setValue={setTableSize}
						setItems={setTableSizes}
						onOpen={onTableSizeOpen}
						{...dropDownStyles}
					/>
					<Text style={styles.dropdownTitle}>Tags</Text>
					<DropDownPicker
						zIndex={1000}
						zIndexInverse={3000}
						multiple
						min={0}
						max={5}
						open={tagsOpen}
						value={tags}
						items={tagsList}
						setOpen={setTagsOpen}
						setValue={setTags}
						setItems={setTagsList}
						onOpen={onTagsOpen}
						{...dropDownStyles}
					/>
				</View>
				<Text style={styles.dropdownTitle}>Location</Text>
				<TextInput
					style={styles.input}
					placeholder="Location"
					value={location}
					onChangeText={(value) => setLocation(value)}
				/>

				<View style={styles.buttonContainer}>
					<TouchableOpacity
						style={styles.buttonStyle}
						onPress={() => navigation.goBack()}
					>
						<Text style={styles.buttonText}>Back</Text>
					</TouchableOpacity>
					<TouchableOpacity style={styles.buttonStyle} onPress={handleSubmit}>
						<Text style={styles.buttonText}>Next</Text>
					</TouchableOpacity>
				</View>
			</View>
		</TouchableWithoutFeedback>
	);
}