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

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