import React from "react";
import {
	ActivityIndicator,
	Keyboard,
	Text,
	TextInput,
	TouchableOpacity,
	TouchableWithoutFeedback,
	View,
} from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
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 } = route.params;
	const {
		sessionName,
		setSessionName,
		gameType,
		tableSize,
		handleSubmit,
		loading,
	} = useVideoDetails({ 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={gameType.isDropdownOpen}
						value={gameType.value}
						items={gameType.optionsList}
						setOpen={gameType.toggleOpen}
						setValue={gameType.setValue}
						setItems={gameType.setOptionsList}
						{...dropDownStyles}
					/>
					<Text style={globalInputStyles.dropdownTitle}>Table Size</Text>
					<DropDownPicker
						zIndex={2000}
						zIndexInverse={2000}
						open={tableSize.isDropdownOpen}
						value={tableSize.value}
						items={tableSize.optionsList}
						setOpen={tableSize.toggleOpen}
						setValue={tableSize.setValue}
						setItems={tableSize.setOptionsList}
						{...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>
	);
}