import {useState,useEffect} from 'react';
import { Button, View, StyleSheet, Image, Text, TouchableOpacity, ScrollView, useTheme, Avatar, Title, Searchbar, Switch} from 'react-native';
import { TouchableRipple, Paragraph, Caption} from 'react-native-paper';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import DashboardScreen from '../home/index';
import CategoriesScreen from '../categories/index';
import WishlistsScreen from '../wishlists/index';
import StatisticsScreen from '../statistics/index';
import CurrencyScreen from '../currency';
import ReminderScreen from '../reminder';
import Transactions from '../transactions/index';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Icon from 'react-native-vector-icons/FontAwesome';
import Ionics from 'react-native-vector-icons/Ionicons';
import Octicons from 'react-native-vector-icons/Octicons';
import { NavigationAction } from '@react-navigation/native';
import { StatusBar } from 'react-native';
import GLOBAL from '../../global';
import AddWishlist from '../wishlists/addwishlist';
import Wishlists from '../wishlists/addwishlist';
import EditTransactions from '../transactions/edittransaction';
import Currency from '../currency/editcurrency';
import Profile from '../profile/index';
import AddCurrency from '../currency/addcurrency';
import LoginScreen from '../login';
import RegisterScreen from '../login';

const logo = require ('../../images/pic.png');
const exit = require ('../../images/log-out.png');
const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();
//const onPress = () => console.log('press');
const home = require ('../../images/shift.png');
const currency = require ('../../images/moneybag.png');
const wish= require ('../../images/wishlist.png')
const settings = require ('../../images/settings.png');
const categories = require ('../../images/categories.png');
const statistics = require ('../../images/statistics.png');
const reminder = require ('../../images/alarm.png'); 
const profile = require ('../../images/profile.jpg');



function CustomDrawer(props){
 
  return (
    
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        <View style={{
          
            flexDirection: 'row',
            padding: 20,
            marginHorizontal:10,
            backgroundColor: 'white',
            marginBottom: 15,
            marginTop:10, 
            borderColor:'grey',
            
            }}>
    
        <View style={{flexDirection:'row'}}>
          <View style = {{flexDirection:'row'}}>
             <TouchableOpacity onPress={() => props.navigation.navigate("Profile")}>
              
             <View style ={{flexDirection:'row', marginHorizontal:5}}>
              <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 style={{flexDirection:'row',}}>
                    <View>
                        <Text style={{fontSize:18, marginHorizontal:28, marginVertical:5, fontWeight:'bold'}}>Farhani Halim</Text>
                        <Text style={{marginHorizontal:25}}>@farhanihalim</Text> 
                           <View style={{flexDirection:'row'}}>
                             <View style ={{flexDirection:'row', justifyContent:'flex-start'}}>
                             </View>
                          </View>
                    </View>
                </View>
            </View>
                
             </TouchableOpacity>
          </View>
        </View> 
         </View>
        <DrawerItemList {...props} /> 
      

        
        
      </DrawerContentScrollView>
     
      <TouchableOpacity
        style={{
          position: 'absolute',
          right: 0,
          left: 0,
          bottom: 50,
          backgroundColor: 'white',
          padding: 20,

        }}
      >
       <View style={{flexDirection: 'row', }}>
       <Ionics name="log-out-outline" size={20} color="grey"
              />
        <Text style= {{marginHorizontal:30, marginTop: 6, fontWeight:'600', color:'grey'}}>Logout</Text></View>
      </TouchableOpacity>
    </View>
  );
};

const DrawerNavigator = () => {
  const [switchOn, setSwitchOn] = useState(false)

  return (
    <Drawer.Navigator useLegacyImplementation
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: 'white',
          elevation: 0,
          shadowOpacity: 0,
        },
      }} 
      drawerContent={props => <CustomDrawer {...props}/>}>
      
      <></>

      <Drawer.Screen component={StackNavigator} name='Dashboard' options={{ 
           //headerShown:false,
           title: 'Dashboard', headerStyle: {
            backgroundColor: 'white',
          
      
          },
          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
          drawerIcon: ({focused, size}) => (
            <Ionics name="home-outline" size={20} color="grey"
            />
          ),
          
        }}
        />

      {/*<Drawer.Screen component={StackNavigator} name='Transactions' options={{ 
           headerShown:false,
           title: 'Dashboard', headerStyle: {
            backgroundColor: 'white',
      
          },
          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
              <Image style = {{width:30, height:30}} source={home}
                
              />
           ),
        }}
      /> */}
      
      <Drawer.Screen component={WishlistsScreen} name='Wishlists' options={{
           title: 'Wishlists',
           headerStyle: {
            backgroundColor: 'white',
          borderBottomLeftRadius:10,
          borderBottomRightRadius:10,
          },

          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
            <Ionics name="gift-outline" size={20} color="grey"
              />
           ),
        }}/>
      <Drawer.Screen component={CategoriesScreen} name='Categories' options={{
           title: 'Categories',
           headerStyle: {
            backgroundColor: 'white',
            borderBottomLeftRadius:10,
            borderBottomRightRadius:10,
      
          },
          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
            <Ionics name="list-outline" size={20} color="grey"
            />
           ),
        }}/>
      <Drawer.Screen component={StatisticsScreen} name='Statistics'options={{
           title: 'Statistics',
           headerStyle: {
            backgroundColor: 'white',
            borderBottomLeftRadius:10,
            borderBottomRightRadius:10,
          
      
          },
          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
            <Ionics name="bar-chart-outline" size={20} color="grey"
            />
           ),
           
        }}/>
      
      <Drawer.Screen component={CurrencyScreen} name='Currency'options={{
        title:'Currency',  
        headerStyle: {
          backgroundColor: 'white',
          borderBottomLeftRadius:10,
          borderBottomRightRadius:10,
    
        },
        headerTintColor: 'black',
        headerTitleStyle: {
          fontWeight: 'normal',

        },
           drawerIcon: ({focused, size}) => (
              <Ionics name="cash-outline" size={20} color="grey"
              />
              
           ),
        }}/>
        <Drawer.Screen component={ReminderScreen} name='Notifications'options={{
           title: 'Notifications',
           headerStyle: {
            backgroundColor: 'white',
            borderBottomLeftRadius:10,
            borderBottomRightRadius:10,

            
      
          },
          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
              <Ionics name="notifications-outline" size={20} color="grey"
             
              />
              
             ),
          }}/>

           {/* <Switch value={switchOn} style= {{}} onValueChange={(toggleSwitch) => {
                setSwitchOn(!switchOn)
             }}/>   */}

{/*<Drawer.Screen component={LoginScreen} name='Login'options={{
           title: 'Login',
           headerStyle: {
            backgroundColor: 'white',
            borderBottomLeftRadius:10,
            borderBottomRightRadius:10,
      
          },
          headerTintColor: 'white',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
            <View> 
              <Image style = {{width:30, height:30}} source={reminder}></Image>
              </View>
           ),
           
        }} />*/}

{/*<Drawer.Screen component={RegisterScreen} name='Register'options={{
           title: 'Register',
           headerStyle: {
            backgroundColor: 'white',
            borderBottomLeftRadius:10,
            borderBottomRightRadius:10,
      
          },
          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
            <View> 
              <Image style = {{width:30, height:30}} source={reminder}></Image>
              </View>
           ),
           
        }} />*/}

{/*<Drawer.Screen component={Transactions} name='Transactions'options={{
           title: 'Transactions',
           headerStyle: {
            backgroundColor: 'white',
            borderBottomLeftRadius:10,
            borderBottomRightRadius:10,
      
          },
          headerTintColor: 'black',
          headerTitleStyle: {
            fontWeight: 'normal',
  
          },
           drawerIcon: ({focused, size}) => (
            <View> 
              <Image style = {{width:30, height:30}} source={reminder}></Image>
              </View>
           ),
           
        }} />*/}
    </Drawer.Navigator>
  );
};

const StackNavigator = ()=> {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Dashboard" component={DashboardScreen} options={{headerShown:false}}/>
      <Stack.Screen name="Transactions" component={Transactions} options={{title:'Add Transactions'}}/>
      <Stack.Screen name="edittransaction" component={Transactions} options={{title:'Edit Transactions'}}/>
      <Stack.Screen name ="Wishlists" component={WishlistsScreen} options={{headerShown:false}}/>
      <Stack.Screen name="addwishlist" component={Wishlists} options = {{title:'Add Wishlist'}}/>
      <Stack.Screen name="editwishlist" component ={Wishlists} options = {{title: 'Edit Wishlist'}}/>
      <Stack.Screen name="Currency" component={CurrencyScreen} options={{headerShown:false}}/>
      <Stack.Screen name="editcurrency" component={Currency} options={{title:'Edit Currency'}}/>
      <Stack.Screen name="addcurrency" component={AddCurrency} options={{title:'New Currency'}}/>
      <Stack.Screen name="Profile" component={Profile} options={{title:'Account Settings'}}/>
      
    </Stack.Navigator>
  );
}

export default function SidebarScreen(props){
  return(
    
    <NavigationContainer>
     <DrawerNavigator/>
    </NavigationContainer>
  )
}