import  React, { useState } from 'react';
import { Button, View, StyleSheet, Text, ScrollView, Image, FlatList, TouchableOpacity} from 'react-native';
import { Searchbar } from 'react-native-paper';
import styles from '../currency/style';
import Ionics from 'react-native-vector-icons/Ionicons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer } from '../sidebar/index';

const plus = require ('../../images/plus.png');
const greater = require('../../images/greater.png');
// const [searchQuery, setSearchQuery] = React.useState('');
// const onChangeSearch = query => setSearchQuery(query);

const CURRENCY = [
  {
    id:'0',
    title:'MYR',
    name:'Malaysian Ringgit',
    status:'DEFAULT',
  },
  {
    id:'1',
    title:'USD',
    name:'United States Dollar',
  },
  {
    id:'2',
    title:'KRW',
    name:'South Korean Won',
  },
  {
    id:'3',
    title:'SGD',
    name:'Singapore Dollar',
  },
  {
    id:'4',
    title:'EUR',
    name:'Euro',
  },
  {
    id:'5',
    title:'EUR',
    name:'Euro',
  },
  {
    id:'6',
    title:'EUR',
    name:'Euro',
  },
  {
    id:'7',
    title:'EUR',
    name:'Euro',
  },
  {
    id:'8',
    title:'EUR',
    name:'Euro',
  },
]

const renderItem = ({ item }) => (
  <View style={{ flex: 1, backgroundColor:'white'}}>
    <View style = {{flexDirection:'row', justifyContent:'flex-end', marginRight:10}}>
        <Text style ={{marginTop:10,fontSize:15, color:'dodgerblue'}}>{item.status}</Text>
    </View>
            <View style = {{flexDirection:'row'}}>
                <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:30, fontWeight:'500'}]}>{item.title}</Text>
                     <View style = {{flexDirection:'column', marginVertical:3}}>
                          <TouchableOpacity onPress={() => navigation.navigate("editcurrency")}><Image style={{width:15, height:20, marginHorizontal:250, marginTop:5}} source={greater} ></Image></TouchableOpacity>
                    </View>
            </View>
               <Text style={{marginHorizontal:30}}>{item.name}</Text>
               <View style={styles.dividerLine}></View>  
  </View>
  
);

{/* <Searchbar
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
    />*/}

    export default function CurrencyScreen({navigation}){
    return (
      <View style={{ flex: 1, backgroundColor:'white'}}> 
        <SafeAreaView>
              {/* <View style = {{flexDirection:'row', justifyContent:'flex-end', marginRight:10}}>
              <Text style ={{marginTop:10,fontSize:15, color:'dodgerblue'}}>Default</Text>
              </View>
              <View style = {{flexDirection:'row', marginTop:5}}>
              <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>USD</Text>
              <View style = {{flexDirection:'column', marginVertical:3}}>
              <TouchableOpacity onPress={() => navigation.navigate("editcurrency")}><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
              </View>
              <Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>United States Dollar</Text>
              <View style={styles.dividerLine}></View>
              <View style = {{flexDirection:'row', marginTop:5}}>
              <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>USD</Text>
              <View style = {{flexDirection:'column', marginVertical:3}}>
              <TouchableOpacity onPress={() => navigation.navigate("editcurrency")}><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
              </View>
              <Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>United States Dollar</Text>
              <View style={styles.dividerLine}></View>

              <View style = {{flexDirection:'row', marginTop:5}}>
              <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>MYR</Text>
              <View style = {{flexDirection:'column', marginVertical:3}}>
              <TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
              </View>
              <Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>Malaysian Ringgit</Text>
              <View style={styles.dividerLine}></View>

              <View style = {{flexDirection:'row', marginTop:5}}>
              <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>KRW</Text>
              <View style = {{flexDirection:'column', marginVertical:3}}>
              <TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
              </View>
              <Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>South Korean Won</Text>
              <View style={styles.dividerLine}></View>

              <View style = {{flexDirection:'row', marginTop:5}}>
              <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>SGD</Text>
              <View style = {{flexDirection:'column', marginVertical:3}}>
              <TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
              </View>
              <Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>Singapore Dollar</Text>
              <View style={styles.dividerLine}></View>

              <View style = {{flexDirection:'row', marginTop:5}}>
              <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>EUR</Text>
              <View style = {{flexDirection:'column', marginVertical:3}}>
              <TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
              </View>
              <Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>Euro</Text>
              <View style={styles.dividerLine}></View>

              <TouchableOpacity style={{backgroundColor:'dodgerblue', elevation:3, width:70, height:70, justifyContent:'center', alignItems:'center', borderRadius:100, bottom:20, left:300, marginTop:210}} onPress={() => navigation.navigate("addcurrency")}>
             <Image style={{width:20, height:20}} source = {plus}></Image>
          </TouchableOpacity> */}
          <FlatList
           data={CURRENCY}
           renderItem={renderItem}
           keyExtractor={item => item.id}
          />
          <TouchableOpacity style={{backgroundColor:'white', elevation:7, width:70, height:70,justifyContent:'center', alignItems:'center', position:'absolute', borderRadius:100, bottom:20, left:310, marginTop:210}} onPress={() => navigation.navigate("addcurrency")}>
             <Image style={{width:30, height:30}} source = {plus}></Image>
          </TouchableOpacity>
           </SafeAreaView>  
      </View>
    );
  };

