import React, {useState} from 'react';
import {RefreshControl, Button, SafeAreaView, View,Text, Image, TouchableOpacity, Linking, Alert, SectionList,ScrollView, KeyboardAvoidingView} 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 walletacc = require ('../../images/walletacc.png');
const cashacc = require ('../../images/cashacc.png');
const debitacc = require ('../../images/debitacc.png');
const cardacc = require ('../../images/cardacc.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',
       image1:require ('../../images/cardacc.png')
      },
      {
       id:"1",
       type:"Awards",
       image:require('../../images/medal.png'),
       account:'Cash',
       amount:'RM100.00',
       image1:require ('../../images/cashacc.png')
      },
     ]
    }

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

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

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

    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'}}>
                    <Image source={item.image1} style={{marginHorizontal:10, width:20, height:20}}/>
                    <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();
  };

  const [currCode, setCurrCode] = useState('RM');
  const [totalAmount, setTotalAmount] = useState('');

    return (
        <View style={styles.container}>
        <View style={styles.containerBottom}>
          <View style={{flexDirection:'row',marginTop:25,justifyContent:'space-between', width:'100%'}}>

             <TouchableOpacity style={{flexDirection:'row', width:'5%', marginHorizontal:40}}>
                <Image style={{width:15, height:20,}} source={less}></Image>
             </TouchableOpacity>

              <TouchableOpacity style={{width:'40%', flexDirection:'row', marginHorizontal:20}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}> 
                   <DateTimePickerModal
                      isVisible={isDatePickerVisible}
                      mode="date"
                      onConfirm={handleConfirmDate}
                      onCancel={hideDatePicker}/>
                          <Text style={{fontSize:18, color:'black'}}>{confirmDate}</Text>
              </TouchableOpacity>
             
                <TouchableOpacity style={{flexDirection:'row', width:'6%'}}>
                   <Image style={{width:15, height:20}} source={greater}></Image>
                </TouchableOpacity>

                <TouchableOpacity style={{width:'10%'}}>
                <Ionics name="calendar-outline" size={20} color="black"/>
                </TouchableOpacity>
          </View>

          <View style ={{flexDirection:'row', justifyContent:'space-evenly', marginTop:35, width:'100%'}}>
            <View style={{flexDirection:'row', width:'20%'}}>
              <Text style = {{fontSize:15, color:'black'}}>EXPENSE</Text>
            </View>
            <View style={{flexDirection:'row',width:'22%'}}>
               <Text style = {{fontSize:15, color:'black'}}>INCOME</Text>
            </View>
            <View style={{flexDirection:'row',width:'11%'}}>
              <Text style = {{fontSize:15, color:'black'}}>TOTAL</Text>
            </View>
          </View>

            <View style ={{flexDirection:'row', justifyContent:'space-evenly', marginTop:1, marginBottom:50, width:'100%'}}>
              <View style={{flexDirection:'row', width:'24%', marginRight:'auto', marginHorizontal:25}}>
              <Text style = {{color:'red', fontSize:15,}}>{currCode} 1,000000.00</Text>
              </View>
              <View style={{flexDirection:'row', width:'28%'}}>
              <Text style = {{fontSize:15, color:'#006ad1'}}>{currCode} 1,000000.00</Text>
              </View>
              <View style={{flexDirection:'row', marginLeft:'auto', width:'29%'}}>
              <Text style = {{fontSize:15, color:'black'}}>{currCode} 1,000000.00</Text>
              </View>
          </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>
       </View> 
  );
};
