import * as React from 'react';
import { useState } from 'react';
import { Button, View, Text, TextInput, SectionList, Image, TouchableOpacity, 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 DashboardScreen from '../home';
import styles from './style';
import { MaterialDatetimePickerAndroid } from 'react-native-material-datetime-picker';
import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
import RNMaterialDatetimePicker from 'react-native-material-datetime-picker';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import WishlistsScreen from '.';

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 handleButton = () =>{
    navigation.navigate('editcurrency',{
       name:'Edit Currency',
    });
  };
const AddCurrency =()=> {

  const [name, onChangeName] = React.useState(null);
  const [note, onChangeNote] = React.useState(null);
  const [targetAmount, onChangeTargetAmount] = React.useState(null);
  const [amountSaved, onChangeAmountSaved] = 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();
  };
    return (
        <View style = {{backgroundColor:'white', height:'100%'}}>
            <View style={{marginHorizontal:20, marginTop:20}}>
              <Text style={{marginBottom:20}}>Select currency</Text>
              <Image style={{width:10, height:10, marginHorizontal:330,}} source={drop}></Image>
                 <View style={[styles.dividerLine,{marginBottom:30}]}></View>
                   
                    <View style={{flexDirection:'row'}}> 
                       <Text style={styles.text}>1 MYR = </Text>
                       <Text style={[styles.text,{marginHorizontal:151, marginBottom:50}]}>1 USD = </Text>
                    </View>

              

              <View style={{flexDirection:'row'}}>
                <View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
                <View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}></View>
              </View>

             
                   
              <View style={{flexDirection:'column', justifyContent:'space-between'}}> 
                    <View style={{flexDirection:'row'}}> 
                    
                       <Text style={[styles.text,{}]}>Code</Text>
                       <Text style={[styles.text,{marginHorizontal:156, marginBottom:50}]}>Symbol</Text></View>
                    </View>

              

              <View style={{flexDirection:'row'}}>
                <View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
                <View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}></View>
              </View>
              <View style={{flexDirection:'row'}}>
                     <TouchableOpacity style={styles.saveButton}>
                        <Text style={{color:'white', fontWeight:'bold'}}>REFRESH FROM SERVER</Text>
                     </TouchableOpacity>
                  </View>
                  
             </View>

                 
        </View>
      
    );
};

export default AddCurrency;
