import React, { useState, useEffect } from 'react';


import { Image, View, ImageBackground, Dimensions, ScrollView, TouchableOpacity, Alert} from 'react-native';
import {   Button, Card, Input, Layout,  Text,RadioGroup, Radio,} from '@ui-kitten/components';

import {storeData, getData} from '../_AsyncStorage';
import { app_name, API, API_VERSION, cipher } from '../_Configuration';

import * as ImagePicker from 'react-native-image-picker';
import axios from 'axios';
import { readDir } from 'react-native-fs';



export default class XrayResults extends React.Component {
    state = {
        gender:0 , operation : 0, age:(0) ,name:''
          
      };
      windowWidth = Dimensions.get("window").width;
      windowHeight = Dimensions.get("window").height;
    componentDidMount = () => {
        console.log(this.props.navigation);
     
    
   }
   number =(age1)=>{
    if (!/^[0-9]+$/.test(age1)) {
        console.log('Enter Only Number');
        this.setState({age:(0)});
        Alert.alert('Age must be a Number');
        
        
      } else {
          console.log('Success');
      }
   }
    render()  {
      return (
  <View style={{justifyContent:'flex-start',paddingTop:100,alignItems:'center',backgroundColor:'#d0c5fa',height:this.windowHeight}}>
        <Card style={{borderRadius: 10, marginTop:5,height:400, marginHorizontal:20,backgroundColor:'#f4e6fc'}}>
        <View style={{marginVertical:5}}><Text style={{marginVertical:5}}>Enter your Name..</Text>
                < Input  value={this.state.name} onChangeText={(value)=>{this.setState({name:(value)})}}></Input>
            </View>
                <Text>Choose your gender..</Text>
                <View style={{flex: 1, flexDirection: 'row', marginTop: 20}}>
                    <View style={(this.state.gender == 0) ? {height: 100, width:  this.windowWidth/2 -45, borderWidth: 1, borderColor: '#A30FC1'}:{height: 100, width:  this.windowWidth/2 -45}}>
                        <TouchableOpacity onPress={() => {this.setState({gender:0})}}>
                        <Image source={require('../Images/man.png')}
                        style={{width: this.windowWidth/2 -55, height: 85, resizeMode: 'contain', margin:5 }}/>
                        </TouchableOpacity>
                    </View>
                    <View style={(this.state.gender == 1) ? {height: 100, width:  this.windowWidth/2 -45, borderWidth: 1, borderColor: '#A30FC1'}:{height: 100, width:  this.windowWidth/2 -45}}>
                        <TouchableOpacity onPress={() => {this.setState({gender:1})}}>
                        <Image source={require('../Images/woman.png')}
                        style={{width: this.windowWidth/2 -55, height: 85, resizeMode: 'contain', margin:5 }}/>
                        </TouchableOpacity>
                    </View>
                </View>
                <RadioGroup
                    selectedIndex={this.state.gender}
                    onChange={index => this.setState({gender:index})}
                    style={{flex: 1, flexDirection: 'row', justifyContent: 'space-around', marginTop: 110}}>
                    <Radio>Male</Radio>
                    <Radio>Female</Radio>
                </RadioGroup>
            <View style={{marginVertical:10}}><Text style={{marginVertical:20}}>Choose your Age..</Text>
                < Input  value={this.state.age} onChangeText={(value)=>{this.number(value);this.setState({age:(value)})}}></Input>
            </View>
            
        </Card>
  <TouchableOpacity 
    onPress={()=>{ this.props.navigation.navigate("main",{age: this.state.age,gender: this.state.gender, name: this.state.name  , navigation:this.props.navigation});         
    }}>
    <View style={{height:50,width:200,marginVertical:20,justifyContent:'center',alignItems:'center',backgroundColor:'#7f00c7'}}><Text style={{color:'#fff'}}>Next</Text></View>
</TouchableOpacity>
  </View>
  
      );
  
  }}