import * as React from 'react';
import { Button, View, Text, FlatList, Image, TouchableOpacity,ScrollView} from 'react-native';
import styles from '../wishlists/style';
import AddWishlist from './addwishlist';
import EditWishlist from './editwishlist';
import { NavigationContainer } from '../sidebar/index';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native-safe-area-context';

const insurance = require ('../../images/insurance.png');
const car = require ('../../images/car.png');
const home = require ('../../images/home.png');
const tree = require ('../../images/tree.png');
const dreamcar = require ('../../images/dreamcar.png');
const plus = require ('../../images/plus.png');
//const onPress = () => console.log('press');
const handleButtonPress = () => {
   navigation.navigate('addwishlist', {
     name: 'Add Wishlist',
 
   });
 };

 const handleButton = () =>{
   navigation.navigate('editwishlist',{
      name:'Edit Wishlist',
   });
 };

 const WISH = [
   {
      id:'0',
      title:'New Vehicle',
      image:require('../../images/dreamcar.png'),
      date:'01/04/2024',
      saved:'RM300',
      goal:'RM70,000',
   },
   {
      id:'1',
      title:'New Home',
      image:require('../../images/home.png'),
      date:'01/04/2024',
      saved:'RM300',
      goal:'RM70,000',
   },
   {
      id:'2',
      title:'Holiday Trip',
      image:require('../../images/tree.png'),
      date:'01/04/2024',
      saved:'RM300',
      goal:'RM70,000',
   },
   {
      id:'3',
      title:'Emergency Fund',
      image:require('../../images/insurance.png'),
      date:'01/04/2024',
      saved:'RM300',
      goal:'RM70,000',
   },
   {
      id:'4',
      title:'Education',
      image:require ('../../images/education.png'),
      date:'01/04/2024',
      saved:'RM300',
      goal:'RM70,000',
   },

 ];

//  onPress={() => navigation.navigate("editwishlist")}
 const renderItem = ({ item }) => (
   <View style={styles.container}>
     <TouchableOpacity>
       <View style = {styles.containerTop}>
          <View style={{flexDirection:'row'}}>
             <View style={{borderWidth:0.7, borderRadius:100, width:60, height:60, borderColor:'lightgrey'}}>
                  <Image source={item.image} style={styles.img}/>
              </View>
                <View style={{flexDirection:'row', marginHorizontal:20, marginVertical:15}}>
                   <View>
                      <Text style={{fontWeight:'bold'}}>{item.title}</Text>
                      <Text>Target date: {item.date}</Text>
                   </View>
                </View>
          </View>
                 <View style={[styles.levelContainer,{ marginVertical:17, justifyContent:'flex-start'}]}>
                 </View>
               <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'space-between', marginHorizontal:0, marginVertical:1}}>
                           <Text style={{color:'#006ad1', fontSize:15}}>Saved: {item.saved}</Text>
                           <Text style={{fontSize:15}}>Goal: {item.goal}</Text>
                    </View>
               </View>
       </View>
     </TouchableOpacity>
   </View>
 );

export default function WishlistsScreen({ navigation }) {

    return (
      
      <SafeAreaView>
         <FlatList
        data={WISH}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />

 <TouchableOpacity style={{backgroundColor:'white', elevation:7, width:70, height:70, position:'absolute', justifyContent:'center', alignItems:'center', borderRadius:100, bottom:20, left:310}} onPress={() => navigation.navigate("addwishlist")}>
             <Image style={{width:30, height:30}} source = {plus}></Image>
          </TouchableOpacity>
         {/* <TouchableOpacity onPress={() => navigation.navigate("editwishlist")}>
          <View style = {styles.containerTop}>
            <View style ={{flexDirection:'row'}}>
              <View style={{backgroundColor:'#2693ff', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:50, height:50,}}>
                  <Image style={{width:40, height:40}} source={dreamcar}/>
              </View>
                 <View style={{flexDirection:'row', marginVertical:1}}>
                    <View>
                        <Text style={[styles.textStyle, {marginHorizontal:11, marginTop:5}]}>New Vehicle</Text>
                        <Text style={{marginHorizontal:11}}>Target Date 06/02/2023</Text> 
                           <View style={{flexDirection:'row'}}>
                             <View style ={{flexDirection:'row', justifyContent:'flex-start'}}>
                             </View>
                          </View>
                    </View>
                </View>
            </View>
                  <View style={[styles.levelContainer,{ marginVertical:17, justifyContent:'flex-start'}]}>
                  </View>
                     <View style={{flexDirection:'column'}}>
                        <View style={{flexDirection:'row', justifyContent:'space-between', marginHorizontal:0, marginVertical:1}}>
                           <Text style={{color:'green', fontSize:15}}>Saved: RM 0</Text>
                           <Text style={{fontSize:15}}>Goal: RM 70,000</Text>
                        </View>
                    </View>
          </View>
         </TouchableOpacity>
       
      
       <TouchableOpacity>
          <View style = {[styles.containerTop]}>
            <View style ={{flexDirection:'row'}}>
              <View style={{backgroundColor:'#9a009a', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:50, height:50,}}>
                  <Image style={{width:37, height:37, justifyContent:'center'}} source={home}/>
              </View>
                 <View style={{flexDirection:'row', marginVertical:1}}>
                    <View>
                        <Text style={[styles.textStyle, {marginHorizontal:11, marginTop:5}]}>New Home</Text>
                        <Text style={{marginHorizontal:11}}>Target Date 06/04/2026</Text> 
                           <View style={{flexDirection:'row'}}>
                             <View style ={{flexDirection:'row', justifyContent:'flex-start'}}>
                             </View>
                          </View>
                    </View>
                </View>
            </View>
                  <View style={[styles.levelContainer,{ marginVertical:17, justifyContent:'flex-start'}]}>
                  </View>
                     <View style={{flexDirection:'column'}}>
                        <View style={{flexDirection:'row', justifyContent:'space-between', marginHorizontal:0, marginVertical:1}}>
                           <Text style={{color:'green', fontSize:15}}>Saved: RM 0</Text>
                           <Text style={{fontSize:15}}>Goal: RM 500,000</Text>
                        </View>
                    </View>
          </View>
       </TouchableOpacity>

       <TouchableOpacity>
          <View style = {[styles.containerTop]}>
            <View style ={{flexDirection:'row'}}>
              <View style={{backgroundColor:'#ff61b6', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:50, height:50,}}>
                  <Image style={{width:34, height:34, justifyContent:'center'}} source={tree}/>
              </View>
                 <View style={{flexDirection:'row', marginVertical:1}}>
                    <View>
                        <Text style={[styles.textStyle, {marginHorizontal:11, marginTop:5}]}>Holiday Trip</Text>
                        <Text style={{marginHorizontal:11}}>Target Date 01/12/2022</Text> 
                           <View style={{flexDirection:'row'}}>
                             <View style ={{flexDirection:'row', justifyContent:'flex-start'}}>
                             </View>
                          </View>
                    </View>
                </View>
            </View>
                  <View style={[styles.levelContainer,{ marginVertical:17, justifyContent:'flex-start'}]}>
                  </View>
                     <View style={{flexDirection:'column'}}>
                        <View style={{flexDirection:'row', justifyContent:'space-between', marginHorizontal:0, marginVertical:1}}>
                           <Text style={{color:'green', fontSize:15}}>Saved: RM 0</Text>
                           <Text style={{fontSize:15}}>Goal: RM 5,000</Text>
                        </View>
                    </View>
          </View>
       </TouchableOpacity>

       
       <TouchableOpacity style={{backgroundColor:'dodgerblue', elevation:3, width:70, height:70, position:'absolute', justifyContent:'center', alignItems:'center', borderRadius:100, bottom:20, left:310}} onPress={() => navigation.navigate("addwishlist")}>
             <Image style={{width:20, height:20}} source = {plus}></Image>
          </TouchableOpacity> */}
       </SafeAreaView>
     
       
      
    );
  };
