import * as React from 'react';
import { useState } from 'react';
import { Button, View, Text, TextInput, SectionList, Image, TouchableOpacity, ScrollView, FlatList} 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 CURRENCY = [
    {title:'RM - Ringgit Malaysia',value:'RM'},
    {title:'USD - United States Dollar',value:'USD'},
    {title:'KRW - Korean Won',value:'KRW'},
    {title:'EURO',value:'EURO'},
    {title:'TEST',value:'TEST'},
    {title:'TRY',value:'TRY'},
    {title:'CUBA',value:'CUBA'},
    // {label:'GFDFVF',value:'FGDFDWERDDF'},
  ];


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 [currListVisible, setCurrListVisible] = useState(false);
  const [currencyName, setCurrencyName] = useState('None');
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [currencyExc, setCurrencyExc] = useState('1 USD');
  const [currencySymbol, setCurrencySymbol] = useState('\u0024');
  const [currencyCode, setCurrencyCode] = useState('USD');

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

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

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

  const renderCurrency = ({ item }) => (
    <SafeAreaView>
            <TouchableOpacity onPress={()=>{setCurrencyName(item.title)}}>
             <Text style={{marginTop:10, fontSize:15, justifyContent:'center', alignItems:'center', marginHorizontal:10}}>{item.title}</Text>
            </TouchableOpacity>
            <View style={[styles.dividerLine,{marginTop:20}]}></View>        
    </SafeAreaView>
  );

  const ListCurrency = () => { 
    if (currListVisible){
    return(
       <SafeAreaView style={{height:'50%', width:'90%', justifyContent:'flex-start'}}>
         <TouchableOpacity style={{height:'50%', width:'90%'}} onPress={()=>{setCurrListVisible(false)}}></TouchableOpacity>
         <View style={{backgroundColor:'white', borderRadius:5, justifyContent:'center', marginHorizontal:20, width:'90%', height:'30%', marginTop:0, borderWidth:0.5, borderColor:'white', elevation:2, position:'absolute'}}>
              <FlatList     
                 data={CURRENCY}
                 renderItem={renderCurrency}
                 keyExtractor={item => item.id}
                />
                </View>
        </SafeAreaView> 
       );
     };
   };
  
    return (
        <View style = {{backgroundColor:'white', height:'100%'}}>
          <View style={{marginHorizontal:20, marginTop:20}}>
            <Text style={{marginBottom:20}}>Select currency</Text>
              <TouchableOpacity onPress={()=>{setCurrListVisible(true)}}>
                <View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
                  <View style={{flexDirection:'row', width:'90%'}}>
                    <Text style={{fontSize:20}}>{currencyName}</Text>
                  </View>
                  <View style={{flexDirection:'row', width:'5%'}}>
                    <Image style={{width:8, height:8, marginTop:10}} source={drop}></Image>
                  </View>
                </View>
              </TouchableOpacity>

                 <View style={[styles.dividerLine,{marginBottom:30}]}></View>
                 <ListCurrency/>
                    <View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}> 
                    <View style={{flexDirection:'row', width:'57%'}}> 
                       <Text style={styles.text}>1 MYR = </Text></View>                   
                       <View style={{flexDirection:'row', width:'50%'}}>
                       <Text style={[styles.text,{marginBottom:20}]}>{currencyExc} =</Text></View>
                    </View>

             <View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
                 <View style={{flexDirection:'row', width:'57%'}}>
                   <Text style={{fontSize:20}}>0.22709</Text>
                 </View>
                 <View style={{flexDirection:'row', width:'50%'}}>
                   <Text style={{fontSize:20, marginBottom:6}}>4.40350</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', justifyContent:'space-between', width:'100%'}}> 
                    <View style={{flexDirection:'row', width:'57%'}}> 
                       <Text style={[styles.text,{}]}>Code</Text>
                    </View>
                    <View style={{flexDirection:'row', width:'50%'}}>
                       <Text style={[styles.text,{marginBottom:20}]}>Symbol</Text>
                    </View>
              </View>

            <View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
                 <View style={{flexDirection:'row', width:'57%'}}>
                   <Text style={{fontSize:20}}>{currencyCode}</Text>
                 </View>
                 <View style={{flexDirection:'row', width:'50%'}}>
                   <Text style={{fontSize:20, marginBottom:6}}>US{currencySymbol}</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;
