import React, { Component } from "react";
import { View, Text, StyleSheet, TextInput, TouchableOpacity, CheckBox, Picker,
Button } from "react-native";
import Game from './Components/Game';
import Modal from "modal-react-native-web";
class Home extends Component {
state = {
type: "single",
single: { TeamName1: "", TeamOnePlayer: "", TeamName2: "", TeamTwoPlayer: "" },
double: { TeamName1: "", TeamOnePlayer1: "", TeamOnePlayer2: "", TeamName2: "",
TeamTwoPlayer1: "", TeamTwoPlayer2: "" },
show: false,
gamePoint: "",
score: { team1: 0, team2: 0 },
showModal: false,
showContent: "",
}
render() {
return (
<View style={styles(this.props).container}>
<View style={styles(this.props).contentWrapper}>
{/* header */}
<View style={styles(this.props).header}>
<View testID="headerTxtContainer"
style={styles(this.props).headerTxtContainer}>
<Text style={styles(this.props).headerTxt}>Game Sheet</Text>
</View>
</View>
<Game />
<View style={{ flexDirection: "row", width: "100%", alignItems: "center",
justifyContent: "center", marginTop: 20 }}>
<CheckBox
testID='single'
title='single'
/>
<Text testID="lable1" style={{ padding: 10, fontSize: 15 }}></Text>
<CheckBox
testID='double'
title='double'
/>
<Text testID="lable2" style={{ padding: 10, fontSize: 15 }}></Text>
</View>
<View style={{ flexDirection: "row", width: "100%" }}>
<Picker
testID="picker"
id="GamePoint"
style={styles(this.props).picker}
>
<Picker.Item id="option1" />
<Picker.Item id='option2' />
<Picker.Item id='option3' />
</Picker>
</View>
<View>
<TextInput
style={styles(this.props).TeamNameInput}
name="TeamName1"
/>
<TextInput
style={styles(this.props).input}
name={type === "double" ? "TeamOnePlayer1" : "TeamOnePlayer"}
/>
<TextInput
style={styles(this.props).input}
name="TeamOnePlayer2"
/>
<TextInput
style={styles(this.props).TeamNameInput}
name="TeamName2"
/>
<TextInput
style={styles(this.props).input}
name={type === "double" ? "TeamTwoPlayer1" : "TeamTwoPlayer"}
/>
<TextInput
style={styles(this.props).input}
name="TeamTwoPlayer2"
/>
<TouchableOpacity testID="startBtn" style={styles(this.props).Btn} >
<Text style={styles(this.props).BtnTxt}>Start Game</Text>
</TouchableOpacity>
</View>
<Modal ariaHideApp={false} transparent={true}>
<View testID='modal-screen' id="modal" style={{ backgroundColor:
"#000000aa", flex: 1 }}>
<View
style={{
backgroundColor: "#ffffff",
padding: 40,
borderRadius: 10,
marginVertical: '25%',
marginHorizontal: 20,
justifyContent: "center",
flex: 1,
}}
>
<Text style={styles(this.props).modalTitle}></Text>
<View testID="modalContent" >
<Text style={styles(this.props).modalContentTxt}></Text>
</View>
<View style={{ marginTop: 5 }}>
<Button
testID='btn-Cancel'
id="Cancel"
title="Cancel"
/>
</View>
</View>
</View>
</Modal>
</View>
</View>
)
}
}
export default Home;
const styles = (props) => StyleSheet.create({
container: {
backgroundColor: "white"
},
header: {
backgroundColor: "#F97E1F",
padding: 15,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
headerTxtContainer: {
flexDirection: "row",
flexWrap: "wrap",
},
headerTxt: {
fontSize: 20,
fontWeight: "700",
color: "white"
},
modalContentTxt: {
fontSize: 20,
fontWeight: "700",
textAlign: "center"
},
TeamNameInput: {
width: "100%",
height: 45,
fontSize: 16,
paddingRight: 35,
paddingLeft: 35,
marginTop: 20,
backgroundColor: "#F6DAC3",
color: "black",
},
input: {
width: "100%",
height: 45,
fontSize: 16,
paddingRight: 35,
paddingLeft: 35,
marginTop: 20,
borderBottomColor: '#010F08',
borderBottomWidth: 1,
color: "black",
},
txt: {
width: "fitContent",
marginRight: 0,
fontWeight: "600",
fontSize: 20,
color: "white"
},
picker: {
height: 40,
width: "100%",
padding: 5,
margin: 10
},
Btn: {
width: "90%",
height: 50,
borderRadius: 25,
justifyContent: "center",
alignItems: "center",
marginTop: 25,
marginLeft: 20,
backgroundColor: props.disableValue ? "#D8D1CB" : "#F97E1F",
},
BtnTxt: {
textAlign: "center",
color: "white",
fontSize: 20,
},
});
