import React, {useState} from 'react';
import { Button, SafeAreaView, View,Text, Image, TouchableOpacity, Linking, Alert, SectionList,ScrollView} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import styles from '../home/style';
import Ionics from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/FontAwesome';
import AntDesign from 'react-native-vector-icons/AntDesign';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import TransactionsScreen from '../transactions';
import Transactions from '../transactions/edittransaction';
import SidebarScreen from '../sidebar';
import { NavigationContainer } from '../sidebar/index';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';
import Iconn from 'react-native-vector-icons/';

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 more = require('../../images/more.png');
const edit = require ('../../images/pencil.png');
const bin = require ('../../images/delete.png');
const transport = require ('../../images/train.png');
const bill = require('../../images/bill.png');
const phone = require ('../../images/phone.png');
const rent = require ('../../images/rent.png');
const coupon = require ('../../images/coupon.png');
const allowance = require ('../../images/salary.png');
const refund = require ('../../images/refund.png');
const edu = require ('../../images/education.png');
const Stack = createNativeStackNavigator();
// const navigation = useNavigation();
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');

const onPress = () => console.log('press');
const addTransactions = () => {
  navigation.navigate('Transactions', {
    name: 'Add Transaction',
  });
};

// const editTransactions = () =>{
//   navigation.navigate('edittransaction',{
//      name:'Edit Transactions',
//   });
// };

const DATE ={
      title: 'October 13, Tuesday',
      data:[
      {
       id:"0",
       type:"Allowance",
       image:require('../../images/salary.png'),
       account:'Card',
       amount:'RM30.00',
       icon:'card-outline',
      },
      {
       id:"1",
       type:"Awards",
       image:require('../../images/medal.png'),
       account:'Cash',
       amount:'RM100.00',
       icon:'cash-outline'
      },
     ]
    }

    const DATE1 ={
      title: 'October 12, Monday',
      data:[
      {
       id:"2",
       type:"Coupons",
       image:require('../../images/coupon.png'),
       account:'Card',
       amount:'RM30.00',
       icon:'card-outline',
      },
      {
       id:"3",
       type:"Refunds",
       image:require('../../images/refund.png'),
       account:'Cash',
       amount:'RM100.00',
       icon:'cash-outline'
      },
      {
        id:"4",
        type:"Salary",
        image:require('../../images/cheque.png'),
        account:'Cash',
        amount:'RM100.00',
        icon:'cash-outline'
       },
    ]
  }

  const DATE2 ={
    title: 'October 11, Sunday',
    data:[
    {
     id:"5",
     type:"Rental",
     image:require('../../images/rent.png'),
     account:'Card',
     amount:'RM30.00',
     amountCurrency:'Rp70,000',
     icon:'card-outline',
    },
    {
     id:"6",
     type:"Sale",
     image:require('../../images/sale.png'),
     account:'Cash',
     amount:'RM100.00',
     icon:'cash-outline'
    },
    {
      id:"7",
      type:"Shopping",
      image:require('../../images/shoppingcart.png'),
      account:'Cash',
      amount:'RM100.00',
      icon:'cash-outline'
     },
  ]
}

const DATE3 ={
  title: 'October 10, Saturday',
  data:[
  {
   id:"8",
   type:"Education",
   image:require('../../images/education.png'),
   account:'Card',
   amount:'RM30.00',
   icon:'cash-outline',
  },
  {
   id:"9",
   type:"Transportation",
   image:require('../../images/train.png'),
   account:'Cash',
   amount:'RM100.00',
   icon:'cash-outline'
  },
  {
    id:"10",
    type:"Food",
    image:require('../../images/cutlery.png'),
    account:'Cash',
    amount:'RM100.00',
    icon:'cash-outline'
   },
   {
    id:"11",
    type:"Telephone",
    image:require('../../images/phone.png'),
    account:'Wallet',
    amount:'RM100.00',
    icon:'wallet-outline'
   },
   {
    id:"12",
    type:"Bills",
    image:require('../../images/bill.png'),
    account:'Cash',
    amount:'RM100.00',
    icon:'cash-outline'
   },
   {
    id:"13",
    type:"Health",
    image:require('../../images/firstaidkit.png'),
    account:'Cash',
    amount:'RM100.00',
    icon:'cash-outline'
   },
 ]
}

    const renderItem = ({item}) => {
      
      return(
        <View>
        <TouchableOpacity >
          <View style={{flexDirection:'row', marginHorizontal:15, marginBottom:10}}>
            <View style={{borderWidth:0.7, borderRadius:100, width:50, height:50, borderColor:'grey'}}>
             <Image source={item.image} style={[styles.img,{marginBottom:20}]}/></View>
               <View style={{marginBottom:15}}>
                 <Text style={[styles.textStyle1, {marginHorizontal:10}]}>{item.type}</Text>
                  <View style={{flexDirection:'row'}}>
                    <Ionics name={item.icon} size={20} color="#838383" style={{marginHorizontal:10}}></Ionics>
                    <Text style={[styles.textStyle2, {marginHorizontal:0, marginVertical:3}]}>{item.account}</Text>
                  </View>
               </View>
               <View style={{marginLeft:'auto'}}>
               <Text style={[styles.textStyle1, {marginLeft:'auto', color:'#006ad1'}]}>{item.amount}</Text>
               <Text style={[styles.textStyle1, {marginLeft:'auto'}]}>{item.amountCurrency}</Text>
               </View>
         </View>
         </TouchableOpacity>
        
        </View>
        

      )
    }



export default function DashboardScreen({ navigation }) {

  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [confirmDate, setConfirmDate] = useState(todayDate);
  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

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

  const handleConfirmDate = (date) => {
    // console.log("A date has been picked: ", moment(date).format('MMM DD, YYYY'));
    console.log(todayDate);
    setConfirmDate(moment(date).format('MMM DD, YYYY'));
    hideDatePicker();
  };

    return (
        <View style={styles.container}>
        <View style={styles.containerBottom}>
          <View style={{flexDirection:'row',marginTop:25,justifyContent:'space-between', width:'70%', marginHorizontal:70}}>
             <TouchableOpacity>
                <Image style={{width:15, height:20,}} source={less} ></Image>
             </TouchableOpacity>
              <TouchableOpacity style={{}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}> 
                   <DateTimePickerModal
                      isVisible={isDatePickerVisible}
                      mode="date"
                      onConfirm={handleConfirmDate}
                      onCancel={hideDatePicker}/>
                          <Text style={{fontSize:19, marginHorizontal:50, color:'black', width:'50%'}}>{confirmDate}</Text>
              </TouchableOpacity>
             <View style={{flexDirection:'row', }}>
                <TouchableOpacity style={{}}>
                   <Image style={{width:15, height:20, marginHorizontal:22}} source={greater}></Image>
                </TouchableOpacity>

                {/* <TouchableOpacity >
                <Ionics name="calendar-outline" size={20} color="black" style={{marginVertical:0, marginHorizontal:0}}/>
                </TouchableOpacity> */}
            </View>
          </View>
          <View style ={{flexDirection:'row', justifyContent:'flex-start', marginTop:35, width:'90%'}}>
          <Text style = {{fontSize:18, marginHorizontal:30, color:'black'}}>EXPENSE</Text>
          <Text style = {{fontSize:18, marginHorizontal:35, color:'black'}}>INCOME</Text>
          <Text style = {{fontSize:18, marginHorizontal:50, color:'black'}}>TOTAL</Text>
          </View>
          <View style ={{flexDirection:'row', justifyContent:'flex-start', marginTop:1, marginBottom:50}}>
          <Text style = {{color:'red', fontSize:18, marginHorizontal:27}}>RM 422.00</Text>
          <Text style = {{fontSize:18, marginHorizontal:20, color:'#006ad1'}}>RM 2,875.00</Text>
          <Text style = {{fontSize:18, marginHorizontal:27, color:'black'}}>RM 2,453.00</Text>
          </View>
        </View>


        <SafeAreaView style={styles.container}>
        <SectionList
          sections={[DATE, DATE1, DATE2, DATE3]}
           keyExtractor={(item, index) => item + index}
          renderItem={renderItem}
          renderSectionHeader={({ section: {title}}) => (
            <View style={{marginTop:15}}>
            <Text style={[styles.textStyle,{marginHorizontal:10}]}>{title}</Text>
            <View style={styles.horizontalLine}></View>
            </View>
          )}
         />
          <View><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("Transactions")}>
             <Image style={{width:30, height:30}} source = {plus}></Image>
          </TouchableOpacity></View>
        </SafeAreaView>
       
        
          {/* <ScrollView showsVerticalScrollIndicator = {false}>
          <SafeAreaView>
           <Text style={[styles.textStyle,{marginTop:35, marginHorizontal:20,}]}>Oct 11, Tuesday</Text>
            <View style={styles.horizontalLine}></View>
            <TouchableOpacity>
            <View style={{flexDirection:'row', marginHorizontal:20}}>
                <View style={{backgroundColor:'#8b0000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
                <Ionics name="fast-food" size={30} color="white" style={{marginVertical:0, marginHorizontal:5}}/>
                    </View>
                      <View style={{flexDirection:'row'}}>
                        <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                          <Text style={[styles.textStyle, {marginHorizontal:1}]}>Food</Text>
                            <View style={{backgroundColor: 'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1, }}>
                              <View style={{justifyContent:'space-between', flexDirection:'row'}}>  
                              <Ionics name="card-outline" size={20} color="#838383" style={{marginVertical:0, marginHorizontal:2}}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Card</Text>
                              </View> 
                            </View>
                        </View>
                              <View style={{flexDirection:'column'}}>
                                  <Text style={[styles.textStyle2, {marginHorizontal:50}]}>-RM30.00</Text>
                                  <Text style={{marginHorizontal:45, fontSize:15}}>Rp99,069.53</Text>
                              </View>
                      </View>
              </View>
              </TouchableOpacity>
           
              <View style = {{flexDirection:'row', marginBottom:29}}>
                        </View>  
                        <Text style={[styles.textStyle,{marginHorizontal:20}]}>Oct 12, Wednesday</Text>            
                        <View style={styles.horizontalLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row', marginHorizontal:20}}>
                <View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40 }}>
                  <Image style={{width:25, height:25}} source={salary}/>
                    </View>
                      <View style={{flexDirection:'row'}}>
                        <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                          <Text style={[styles.textStyle, {marginHorizontal:1}]}>Allowance</Text>
                             <View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                              <View style={{justifyContent:'space-between', flexDirection:'row'}}>
                              <FontAwesome name="money" size={20} color="#838383" style={{marginVertical:0, marginHorizontal:2}}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
                              </View>
                            </View>
                          </View>
                             <View style={{flexDirection:'column'}}>
                                <Text style={[styles.textStyle2, {marginHorizontal:47, color: 'green'}]}>RM600.00</Text>
                                <Text style={{marginHorizontal:45, fontSize:15}}></Text>
                             </View>
                        </View>
                        </View>
                        </TouchableOpacity>
                       
                        <View style={styles.dividerLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row', marginHorizontal:20}}>
                <View style={{backgroundColor:'#ff8000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, }}>
                <Ionics name="bus" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
                    </View>
                    <View style={{flexDirection:'row'}}>
                      <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                        <Text style={[styles.textStyle, {marginHorizontal:1}]}>Transportation</Text>
                            <View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:25, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                              <View style={{justifyContent:'space-between', flexDirection:'row'}}>
                              <AntDesign name="wallet" size={20} color="#838383" style={{marginVertical:1, marginHorizontal:2}}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Wallet</Text>
                              </View>
                            </View>
                        </View>
                        <Text style={[styles.textStyle2, {marginHorizontal:44, color: 'red'}]}>-RM600.00</Text>
                      
                        </View>
                    </View>
                    </TouchableOpacity>

                    <View style = {{flexDirection:'row', marginBottom:29}}>
                        </View>  
                        <Text style={[styles.textStyle,{marginHorizontal:20}]}>Oct 13, Thursday</Text>            
                        <View style={styles.horizontalLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row',marginHorizontal:20}}>
                <View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
                <Icon name="medkit" size={28} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
                    </View>
                      <View style={{flexDirection:'row'}}>
                        <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                          <Text style={[styles.textStyle, {marginHorizontal:1}]}>Health</Text>
                           <View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                              <View style={{justifyContent:'space-between', flexDirection:'row'}}>
                                <Image style={{marginHorizontal:3,width:20, height:20}} source={cash}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
                              </View>
                            </View>
                          </View>
                        <Text style={[styles.textStyle2, {marginHorizontal:50, color: 'red'}]}>-RM70.00</Text>
                        </View>
                        </View>
                        </TouchableOpacity>

                        <View style={styles.dividerLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row',marginHorizontal:20}}>
                <View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
                <Ionics name="cart" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
                    </View>
                    <View style={{flexDirection:'row'}}>
                    <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                        <Text style={[styles.textStyle, {marginHorizontal:1}]}>Shopping</Text>
                          <View style={{backgroundColor: 'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:25, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                            <View style={{justifyContent:'space-between', flexDirection:'row'}}> 
                                <Image style={[styles.cardPic,{marginHorizontal:3, marginVertical:0, width: 20, height:20}]} source={wallet}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Wallet</Text>
                            </View>

                            </View>
                        </View>
                              <View style={{flexDirection:'column'}}>
                                <Text style={[styles.textStyle2, {marginHorizontal:45, color: 'red'}]}>-RM100.00</Text>
                                <Text style={{marginHorizontal:40, fontSize:15}}>$1,981,390.55</Text>
                             </View>
                        </View>
                    </View>
                    </TouchableOpacity>

                    <View style={styles.dividerLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row',marginHorizontal:20}}>
                <View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
                <Ionics name="trophy" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
                    </View>
                    <View style={{flexDirection:'row', }}>
                      <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                        <Text style={[styles.textStyle, {marginHorizontal:1}]}>Awards</Text>
                        <View style={{backgroundColor:'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                              <View style={{justifyContent:'space-between', flexDirection:'row'}}>
                                <Image style={{marginHorizontal:3,width:20, height:20}} source={cash}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
                              </View>
                            </View>
                        </View>
                        <Text style={[styles.textStyle2, {marginHorizontal:55, color: 'green'}]}>RM60.00</Text>
                      
                        </View>
                    </View>
                    </TouchableOpacity>

                    <View style = {{flexDirection:'row', marginBottom:29}}>
                        </View>  
                        <Text style={[styles.textStyle,{marginHorizontal:20}]}>Oct 14, Friday</Text>            
                        <View style={styles.horizontalLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row',marginHorizontal:20}}>
                <View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
                <Icon name="medkit" size={28} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
                    </View>
                      <View style={{flexDirection:'row'}}>
                        <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                          <Text style={[styles.textStyle, {marginHorizontal:1}]}>Health</Text>
                           <View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                              <View style={{justifyContent:'space-between', flexDirection:'row'}}>
                                <Image style={{marginHorizontal:3,width:20, height:20}} source={cash}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
                              </View>
                            </View>
                          </View>
                        <Text style={[styles.textStyle2, {marginHorizontal:50, color: 'red'}]}>-RM70.00</Text>
                        </View>
                        </View>
                        </TouchableOpacity>

                        <View style={styles.dividerLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row',marginHorizontal:20}}>
                <View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
                <Ionics name="cart" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
                    </View>
                    <View style={{flexDirection:'row'}}>
                    <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                        <Text style={[styles.textStyle, {marginHorizontal:1}]}>Shopping</Text>
                          <View style={{backgroundColor: 'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:25, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                            <View style={{justifyContent:'space-between', flexDirection:'row'}}> 
                                <Image style={[styles.cardPic,{marginHorizontal:3, marginVertical:0, width: 20, height:20}]} source={wallet}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Wallet</Text>
                            </View>

                            </View>
                        </View>
                        <Text style={[styles.textStyle2, {marginHorizontal:45, color: 'red'}]}>-RM100.00</Text>
                      
                        </View>
                    </View>
                    </TouchableOpacity>

                    <View style={styles.dividerLine}></View>
                        <TouchableOpacity>
                        <View style={{flexDirection:'row',marginHorizontal:20}}>
                <View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
                <Ionics name="trophy" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
                    </View>
                    <View style={{flexDirection:'row', }}>
                      <View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
                        <Text style={[styles.textStyle, {marginHorizontal:1}]}>Awards</Text>
                        <View style={{backgroundColor:'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
                              <View style={{justifyContent:'space-between', flexDirection:'row'}}>
                                <Image style={[styles.cardPic,{marginHorizontal:3, marginVertical:0, width: 20, height:20}]} source={cash}/>
                                <Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
                              </View>
                            </View>
                        </View>
                        <Text style={[styles.textStyle2, {marginHorizontal:55, color: 'green'}]}>RM60.00</Text>
                      
                        </View>
                    </View>
                    </TouchableOpacity>
      </SafeAreaView>
          </ScrollView> 
        */}
        
         {/* <TouchableOpacity style={{backgroundColor:'dodgerblue', elevation:3, width:70, height:70, position:'absolute', justifyContent:'center', alignItems:'center', borderRadius:100, bottom:20, left:300}} onPress={() => navigation.navigate("Transactions")}>
             <Image style={{width:20, height:20}} source = {plus}></Image>
          </TouchableOpacity> */}
       </View> 
  );
};
