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

146 lines
4.4 KiB
TypeScript

import React, { useCallback, useState } from 'react'
import { View, TextInput, TouchableWithoutFeedback, Text, TouchableOpacity, Keyboard } 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>
)
}