import React,	{	useState	} from "react";
import	{SafeAreaView,	StyleSheet,	View,	Text,	Picker, Button, Image}	from	'react-native';



export default function App() {
  	const	[picker1SelectedValue,	setPicker1SelectedValue]	=	useState("val-Cauliflower-$6");	
		const	[picker2selectedValue,	setPicker2SelectedValue]	=	useState("1");

    const	[picker3selectedValue,	setPicker3SelectedValue]	=	useState("Banana-$7");
    const	[picker4selectedValue,	setPicker4SelectedValue]	=	useState("1");

    const	[calculatedValue,	setCalculatedValue]	=	useState("");
  return (
  <SafeAreaView style={styles.container}>
  <View	style={styles.row1}>
	<Text	style={styles.heading}>	Welcome To VFUS	</Text>
  <Image style={styles.logo} source={require('./assets/carrot.jpg')} />
	</View>


 <Text	style={styles.heading}>	Veggies	</Text>
 <Text	style={styles.align}>Vegetable                                                       Qty	</Text>
  	<View	style={styles.row2}>
   
								<Picker	style={styles.picker1}
                         selectedValue={picker1SelectedValue}
												onValueChange={(itemValue,	itemIndex)	=>	setPicker1SelectedValue(itemValue)}>

												<Picker.Item	label="Cauliflower-$6"	value="val-Cauliflower-$6"	/>
												<Picker.Item	label="Carrot-$4"	value="val-Carrot-$4"	/>
												<Picker.Item	label="Tomato-$6"	value="Tomato-$6"	/>
								</Picker>
								<Picker	style={styles.picker2}
                	selectedValue={picker2selectedValue}
										onValueChange={(itemValue,	itemIndex)	=>	setPicker2SelectedValue(itemValue)}>
												<Picker.Item	label="1"	value="1"	/>
												<Picker.Item	label="2"	value="2"	/>
												<Picker.Item	label="3"	value="3"	/>
                        <Picker.Item	label="4"	value="4"	/>
                        <Picker.Item	label="5"	value="5"	/>
								</Picker>
						</View>
 <Text	style={styles.heading}>	Fruits	</Text>
 <Text	style={styles.align}>	  Fruit                                                       Qty	</Text>
            	<View	style={styles.row2}>
								<Picker	style={styles.picker1}
                         selectedValue={picker3selectedValue}
												onValueChange={(itemValue,	itemIndex)	=>	setPicker3SelectedValue(itemValue)}>

												<Picker.Item	label="Banana-$7"	value="val-Banana-$7"	/>
												<Picker.Item	label="Apple-$5"	value="val-Apple-$5"	/>
												<Picker.Item	label="Mango-$7"	value="val-Mango-$7"	/>
								</Picker>

								<Picker	style={styles.picker2}
                	selectedValue={picker4selectedValue}
										onValueChange={(itemValue,	itemIndex)	=>	setPicker4SelectedValue(itemValue)}>
												<Picker.Item	label="1"	value="1"	/>
												<Picker.Item	label="2"	value="2"	/>
												<Picker.Item	label="3"	value="3"	/>
                        <Picker.Item	label="4"	value="4"	/>
                        <Picker.Item	label="5"	value="5"	/>
								</Picker>
						</View>

            		<View >
								<Button
										title="CALCULATE"
                    	onPress={()	=>	{
												const	lastChar =	picker1SelectedValue[picker1SelectedValue.length	- 1]; 
                        const	lastChar2 =	picker3selectedValue[picker3selectedValue.length	- 1];

												const	charToIntForPicker1	=	parseInt(lastChar);
                        const	charToIntForPicker3	=	parseInt(lastChar2);
												
												const	charToIntForPicker2	=	parseInt(picker2selectedValue);
                        const	charToIntForPicker4	=	parseInt(picker4selectedValue);
                        
												setCalculatedValue((charToIntForPicker1	*	charToIntForPicker2) + (charToIntForPicker3 * charToIntForPicker4));
										}}
                    />
										<Text	style={styles.heading}>	Total Cost Of The Order : ${calculatedValue}	</Text>
                  
                    
                    <Text style ={styles.footer}>	App Developed by : Aaron Asplet	, Aaron Alphonso, Cheryl Kwong, Martin Spacek</Text>
                  
						</View>










  </SafeAreaView>
  );}

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'column',
      justifyContent: 'center',
alignItems: 'center',
     
      flex: 1,
      backgroundColor: '#E3D3E3'
    },
    		heading:	{
										fontSize:20,
										textAlign:	'center',
										marginTop:	30
								},
                	row2:{
																								flexDirection:	'row',
																									marginTop:	7,
								 },
								picker1:{
								 flex:2
								},
								picker2:{
										 flex:1
								},

                logo: {
                  marginTop : 10,
               width: 200,
    height: 100,
       
    
  },

  footer: {
    marginTop : 30,

  },
  });