import * as React from 'react';
import { useState } from 'react';
import { Button, View, Text, TextInput, SectionList, Image, TouchableOpacity, Sc, PermissionsAndroid, ScrollView} from 'react-native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native';
import { BottomSheet } from 'react-native-btr';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Ionics from 'react-native-vector-icons/Ionicons';
import { MaterialDatetimePickerAndroid } from 'react-native-material-datetime-picker';
import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
import { NavigationAction } from '@react-navigation/native';
import RNMaterialDatetimePicker from 'react-native-material-datetime-picker';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import SidebarScreen from '../sidebar';
import styles from './style';

const logo = require ('../../images/pic.png');
const cutlery = require ('../../images/cutlery.png');
const card = require ('../../images/credit-card.png');
const salary = require ('../../images/salary.png');
const motor = require('../../images/car.png');
const wallet = require ('../../images/wallet.png');
const cash = require ('../../images/money.png');
const cart = require ('../../images/shoppingcart.png');
const health = require ('../../images/firstaidkit.png');
const sale = require ('../../images/sale.png');
const awards = require ('../../images/medal.png');
const less = require ('../../images/less.png');
const greater = require('../../images/greater.png');
const calendar = require('../../images/calendar.png');
const plus = require ('../../images/plus.png');
const acc = require ('../../images/acc.png');
const tag = require ('../../images/tag.png');
const clear = require ('../../images/clear.png');
const drop = require ('../../images/drop.png');
const goalcolor = require('../../images/roundedrectangle.png');
const caricon = require ('../../images/caricon.png');
const Stack = createNativeStackNavigator();
const profile = require ('../../images/profile.jpg');

const Profile =()=> {

  const [fname, onChangeFName] = React.useState(null);
  const [lname, onChangeLName] = React.useState(null);
  const [email, onChangeEmail] = React.useState(null);
  const [password, onChangePassword] = React.useState(null);
  const [confirmPassword, onChangeConfirmPassword] = React.useState(null);
 
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };


const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Cool Photo App Camera Permission",
        message:
          "Cool Photo App needs access to your camera " +
          "so you can take awesome pictures.",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera");
    } else {
      console.log("Camera permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
};
    return (
        
        <View style = {{backgroundColor:'white', height:'100%'}}>
        <ScrollView>
            <View style={{marginHorizontal:20, marginTop:20}}>
              <Text style={{marginBottom:20, fontSize:15,marginHorizontal:5}}>Profile photo</Text>
              <View style = {{flexDirection:'row'}}>
             
             <TouchableOpacity>
             <View style ={{flexDirection:'row', marginHorizontal:25}}>
              <View style={{backgroundColor:'#2693ff', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:50, height:50}}>
                  <Image style={{width: 60, height: 60,  borderColor:'powderblue', borderWidth: 1, elevation: 7,borderRadius: 100,}} source={profile}/>
              </View>
            </View>
             </TouchableOpacity>
             <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                    <View>
                    <View style={{flexDirection:'row'}}>
                     <TouchableOpacity style={styles.saveButton} title="request permissions" onPress={requestCameraPermission}>
                        <View style={{flexDirection:'row'}}>
                     <Icon name="upload" size={20} color="#5eb5ce"/>
                     <Text style={{color:'#5eb5ce', marginHorizontal:10, fontSize:15}}>Upload Picture</Text>
                     </View>
                     </TouchableOpacity>
                     <TouchableOpacity style={styles.button}>
                     <Icon name="delete" size={20} color="red"/></TouchableOpacity>
                  </View>
                    </View>
                </View>
          </View>


                         <View style={{marginTop:30, flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
                            <Text style={{fontSize:15, marginHorizontal:5}}>First Name</Text>
                            <Text style={{fontSize:15, marginHorizontal:90}}>Last Name</Text>
                        </View>
                        <View style={{marginTop:10, marginHorizontal:5,flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
                            <View style={styles.input}> 
                            <TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeFName={onChangeFName} value={fname} fontSize={15}/></View>
                            <View style={[styles.input,{marginRight:10}]}>
                            <TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeFName={onChangeLName} value={lname} fontSize={15}/>
                            </View>
                        </View>

                        <View style={{marginTop:30, flexDirection:'column',}}>
                            <Text style={{fontSize:15, marginHorizontal:5}}>Email</Text>
                            <View style={{marginTop:10, flexDirection:'row',}}>
                            <View style={[styles.input,{width:350}]}><TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeEmail={onChangeEmail} value={email} fontSize={15}/></View>
                        </View>
                        </View>

                        <View style={{marginTop:30, flexDirection:'column',}}>
                            <Text style={{fontSize:15, marginHorizontal:5}}>Password</Text>
                            <View style={{marginTop:10, flexDirection:'row',}}>
                            <View style={[styles.input,{width:350}]}><TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangePassword={onChangePassword} value={password} fontSize={15}/></View>
                        </View>
                        </View>

                        <View style={{marginTop:30, flexDirection:'column',}}>
                            <Text style={{fontSize:15, marginHorizontal:5}}>Confirm Password</Text>
                            <View style={{marginTop:10, flexDirection:'row',}}>
                            <View style={[styles.input,{width:350}]}><TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeConfirmPassword={onChangeConfirmPassword} value={confirmPassword} fontSize={15}/></View>
                        </View>
                        </View>

                        <View style={{marginTop:30, flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
                            <Text style={{fontSize:15, marginHorizontal:5}}>DOB</Text>
                            <Text style={{fontSize:15, marginHorizontal:110}}>Gender</Text>
                        </View>

                        <View style={{marginTop:10, marginHorizontal:5,flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
                            <View style={styles.input}> 
                            <TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeFName={onChangeFName} value={fname} fontSize={15}/></View>
                            <View style={[styles.input,{marginRight:10}]}>
                            <TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeFName={onChangeLName} value={lname} fontSize={15}/>
                            </View>
                        </View>

                        <View style={{flexDirection:'row'}}>
                          <TouchableOpacity style={{alignItems: "center",
                                                    backgroundColor: "dodgerblue",
                                                    padding: 10,
                                                    width:'40%',
                                                    borderRadius:5,
                                                    marginTop:40,
                                                    marginHorizontal:100}}>
                        <Text style={{color:'white', fontWeight:'bold'}}>Save Changes</Text>
                     </TouchableOpacity>
                  </View>

                        </View>

                    </ScrollView>
</View>

    );
};

export default Profile;