import React, { useEffect, useRef, useState, memo, Component } from "react";
import { KeyboardAvoidingView,Button, View, Text, SectionList, Image, TouchableOpacity, TextInput, FlatList, ScrollView, SafeAreaView} from 'react-native';
import DashboardScreen from '../home';
import styles from './style';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import RBSheet from 'react-native-raw-bottom-sheet';
import Ionics from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-vector-icons/FontAwesome';
import moment from 'moment/moment';
import SelectDropdown from 'react-native-select-dropdown';
import Select, {SelectItem} from '@redmin_delishaj/react-native-select';
import {Dropdown} from 'react-native-material-dropdown';
// import PropTypes from "prop-types";
// import {Picker} from '@react-native-picker/picker';
// import RNPickerSelect from 'react-native-picker-select';
// import SelectList from 'react-native-dropdown-select-list';
// import ReactNativeItemSelect from 'react-native-item-select';

const rent = require ('../../images/rent.png');
const card = require ('../../images/visa.png');
const salary = require ('../../images/cheque.png');
const motor = require('../../images/car.png');
const wallet = require ('../../images/wallet1.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 acc = require ('../../images/acc.png');
const tag = require ('../../images/tag.png');
const clear = require ('../../images/clear.png');
const debit = require('../../images/debit.png');
const addacc = require ('../../images/addacc.png');
const more = require('../../images/more.png');
const cutlery = require ('../../images/cutlery.png');
const edit = require ('../../images/pencil.png');
const bin = require ('../../images/delete.png');
const transport = require ('../../images/car.png');
const bill = require('../../images/bill.png');
const phone = require ('../../images/phone.png');
const allowance = require ('../../images/salary.png');
const refund = require ('../../images/refund.png');
const coupon = require ('../../images/coupon.png');
const drop = require ('../../images/drop.png');
const tickmark = require ('../../images/tickmark.png');
const onPress = () => console.log('press');
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
const todayTime = moment().utcOffset('+08.00').format('LT');

const ACC = [
  {
     id:'0',
     title:'Cash',
     icon:'cash-outline',
     balance:'RM600.00',
  },
  {
     id:'1',
     title:'Card',
     icon:'card-outline',
     balance:'RM600.00',
  },
  {
     id:'2',
     title:'Wallet',
     icon:'wallet-outline',
     balance:'RM600.00',
  },
  {
     id:'3',
     title:'Debit',
     icon:'card-sharp',
     balance:'RM600.00',
  },
];

const INC = [
  {
    id:"0",
    type:"Allowance",
    image: require('../../images/salary.png')
  },
  {
    id:"1",
    type:"Awards",
    image:require('../../images/medal.png')
  },
  {
     id:'2',
     type:"Coupons",
     image: require('../../images/coupon.png')
  },
  {
     id:'3',
     type:"Refunds",
     image:require('../../images/refund.png')
  },
  {
    id:"4",
    type:"Salary",
    image: require('../../images/cheque.png')
   },
   {
    id:"5",
    type:"Rental",
    image:require('../../images/rent.png')
   },
   {
     id:"6",
     type:"Sale",
     image: require('../../images/sale.png')
   },
  //  {
  //   id:"7",
  //   type:"Sale",
  //   image: require('../../images/sale.png')
  // },
  // {
  //   id:"8",
  //   type:"Allowance",
  //   image: require('../../images/sale.png')
  // },
  // {
  //   id:"9",
  //   type:"Allowance",
  //   image: require('../../images/sale.png')
  // },
  // {
  //   id:"10",
  //   type:"Allowance",
  //   image: require('../../images/sale.png')
  // },
];

const EXP = [
  {
    id:"0",
    type:"Shopping",
    image: require('../../images/shoppingcart.png')
  },
  {
    id:"1",
    type:"Education",
    image:require('../../images/education.png')
  },
  {
    id:"2",
    type:"Transportation",
    image: require('../../images/train.png')
  },
  {
    id:"3",
    type:"Food",
    image:require('../../images/cutlery.png')
  },
  {
    id:"4",
    type:"Telephone",
    image: require('../../images/phone.png')
  },
  {
    id:"5",
    type:"Bills",
    image:require('../../images/bill.png')
  },
  {
    id:"6",
    type:"Health",
    image: require('../../images/firstaidkit.png'),
    backgroundColor:'yellow'
  },
  // {
  //   id:"7",
  //   type:"Transportation",
  //   image: require('../../images/train.png')
  // },
  // {
  //   id:"8",
  //   type:"Food",
  //   image:require('../../images/cutlery.png')
  // },
  // {
  //   id:"2",
  //   type:"Transportation",
  //   image: require('../../images/train.png')
  // },
  // {
  //   id:"3",
  //   type:"Food",
  //   image:require('../../images/cutlery.png')
  // },
];

// const [selectedLanguage, setSelectedLanguage] = useState();

const renderItem = ({ item }) => (
  <SafeAreaView>
             <View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}>
                 <TouchableOpacity style={{flexDirection:'row',marginBottom:10}}>
                     <View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:100,width:40, height:40, marginLeft:10, marginRight:10,justifyContent:'space-between'}}>
                     <Ionics name={item.icon} size={25} color="#838383" style={{marginHorizontal:7, marginTop:6}}></Ionics></View>
                            <View style={{flexDirection:'row', justifyContent:'space-between',width:'45%'}}>
                                  <Text style={{marginHorizontal:13, fontSize:18, marginTop:10, fontWeight:'600', color:'black', width:'145%'}}>{item.title}</Text>
                                  <Text style={{fontSize:18,fontWeight:'600', color:'#006ad1', marginTop:10, marginRight:25}}>{item.balance}</Text>
                            </View>
                  </TouchableOpacity>
              </View>
  </SafeAreaView>
);

const renderItem1 = ({ item }) => (
  <SafeAreaView>
<View style= {{}}>
       <View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
        <View style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}}>
         <Image source={item.image} style={styles.img}/></View>
       </View>
       <View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
          <Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
       </View>
       </View>
  </SafeAreaView>
);

const renderItem2 = ({item}) =>(
  <SafeAreaView>
<View style= {{}}>
       <View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
        <View style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}}>
         <Image source={item.image} style={styles.img}/></View>
       </View>
       <View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
          <Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
       </View>
       </View>
  </SafeAreaView>
  
);
const YourAccount = () => 
       <SafeAreaView>
        <Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>
         {/* <Text style={{fontSize:20, fontWeight:'600', marginTop:20, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>
             <View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,}}>
                 <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
                     <View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
                        <Image style={{width:40, height:40, marginHorizontal:4, marginTop:4}} source={cash}></Image></View>
                            <View style={{flexDirection:'row', justifyContent:'space-between',}}>
                                  <Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Cash</Text>
                                  <Text style={{marginHorizontal:140, fontSize:18, marginVertical:10, fontWeight:'600', color:'green'}}>RM300.50</Text>
                            </View>
                  </TouchableOpacity>
              </View>

              <View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,marginTop:20}}>
                 <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
                     <View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
                        <Image style={[styles.img,{marginHorizontal:4, marginTop:4}]} source={card}></Image></View>
                            <View style={{flexDirection:'row', justifyContent:'space-between',}}>
                                  <Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Card</Text>
                                  <Text style={{marginHorizontal:140, fontSize:18, marginVertical:10, fontWeight:'600', color:'red'}}>-RM300.50</Text>
                            </View>
                  </TouchableOpacity>
              </View>

              <View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,marginTop:20}}>
                 <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
                     <View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
                        <Image style={[styles.img,{marginHorizontal:5, marginTop:4}]} source={wallet}></Image></View>
                            <View style={{flexDirection:'row', justifyContent:'space-between',}}>
                                  <Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Wallet</Text>
                                  <Text style={{marginHorizontal:134, fontSize:18, marginVertical:10, fontWeight:'600', color:'green'}}>RM300.50</Text>
                            </View>
                  </TouchableOpacity>
              </View>

              <View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,marginTop:20}}>
                 <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
                     <View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
                        <Image style={[styles.img,{marginHorizontal:4, marginTop:4}]} source={debit}></Image></View>
                            <View style={{flexDirection:'row', justifyContent:'space-between',}}>
                                  <Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Debit</Text>
                                  <Text style={{marginHorizontal:140, fontSize:18, marginVertical:10, fontWeight:'600', color:'green'}}>RM300.50</Text>
                            </View>
                  </TouchableOpacity>
              </View>

              <View style ={{flexDirection:'row', backgroundColor:'transparent', width:200,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30}}>
              <Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}
              />
                 <Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text>
              </View> */}
              
         <FlatList
        data={ACC}
        renderItem={renderItem}
        keyExtractor={item => item.id}
         />
      <View style ={{flexDirection:'row', backgroundColor:'transparent', width:200,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
              <Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}
              />
                 <Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text>
              </View>
       </SafeAreaView>

const IncomeCategory = () => 

<SafeAreaView>
  <Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
      {/* <View style={{justifyContent:'center', flexDirection:'column', marginHorizontal:35}}>
         <View style={{flexDirection:'row', justifyContent:'space-between'}}>
            <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}} onPress={onPress}>
              <View style={{backgroundColor:'#00468b', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <Ionics name="trophy" size={50} color="white" style={{marginVertical:5, marginHorizontal:5}}/>
                  <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginHorizontal:5, marginVertical:12}}>Awards</Text>
                     </View>
                  </View>   
              </View>   
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#ff8000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <MaterialCommunityIcons name="ticket" size={50} color="white" style={{marginVertical:4, marginHorizontal:5}}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row',justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginVertical:12}}>Coupons</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#e63e00', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
                 <Image style={{width:40, height:40, marginHorizontal:10, marginTop:7, justifyContent:'center', marginBottom:26}} source={allowance}/>
                 <View style={{flexDirection:'column', width:'110%'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>Allowance</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>
           </View>


           <View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
        
            <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#8b0000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <MaterialCommunityIcons name="cash-refund" size={50} color="white" style={{marginVertical:0, marginHorizontal:5}}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginVertical:20, marginHorizontal:2}}>Refunds</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
                <Image style={{width:40, height:40, marginHorizontal:10, marginTop:42, justifyContent:'center', marginBottom:20}} source={salary}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>Salary</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
                 <Image style={{width:45, height: 45, marginHorizontal:10, marginTop:38, justifyContent:'center', marginBottom:20}} source={rent}/>
                 <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>Rental</Text>
                     </View>
                  </View>   
                 
              </View>       
           </TouchableOpacity>
           </View>

           <View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
        
            <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#ff74af', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <MaterialCommunityIcons name="sale" size={50} color="white" style={{marginVertical:3, marginHorizontal:5}}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginVertical:12, marginHorizontal:15}}>Sale</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>           
           </View>
      </View> 
*/}
<FlatList
        data={INC}
        renderItem={renderItem1}
        keyExtractor={item => item.id}
        numColumns={3}
      />
            <View style ={{flexDirection:'row', backgroundColor:'transparent', width:205,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
            <Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}/>
              <Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW CATEGORY</Text>
            </View> 
</SafeAreaView>

const ExpenseCategory = () => 
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
      {/* <View style={{justifyContent:'center', flexDirection:'column', marginHorizontal:35}}>
         <View style={{flexDirection:'row', justifyContent:'space-between'}}>
        
            <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#e63e00', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <Ionics name="cart" size={50} color="white" style={{marginVertical:5, marginHorizontal:5}}/>
                  <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginHorizontal:0, marginVertical:12}}>Shopping</Text>
                     </View>
                  </View>   
              </View>   
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#00468b', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <Icon name="graduation-cap" size={39} color="white" style={{marginVertical:10, marginHorizontal:5}}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row',justifyContent:'flex-start',}}>
                       <Text style={{color:'black', fontSize:16, marginVertical:12}}>Education</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#ff8000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <Ionics name="bus" size={50} color="white" style={{marginVertical:3, marginHorizontal:5}}/>
                 <View style={{flexDirection:'column', width:'110%'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>Transportation</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>
           </View>


           <View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
        
            <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#8b0000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <Ionics name="fast-food" size={45} color="white" style={{marginVertical:5, marginHorizontal:6}}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginVertical:20, marginHorizontal:2}}>Food</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
              <Ionics name="call" size={45} color="white" style={{marginTop:25, marginHorizontal:6}}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start', marginTop:10}}>
                       <Text style={{color:'black', fontSize:16,}}>Telephone</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>

           <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
              <MaterialCommunityIcons name="receipt" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}
              />
                 <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>Bills</Text>
                     </View>
                  </View>   
                 
              </View>       
</TouchableOpacity>
           </View>

           <View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
        
            <TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
              <View style={{backgroundColor:'#ff74af', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
              <Icon name="medkit" size={40} color="white" style={{marginTop:7, marginHorizontal:9}}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginVertical:15, marginHorizontal:8}}>Health</Text>
                     </View>
                  </View>   
              </View>       
           </TouchableOpacity>

           
           </View>
</View> */}

            

<FlatList
        data={EXP}
        renderItem={renderItem2}
        keyExtractor={item => item.id}
        numColumns={3}
      />
      <View style ={{flexDirection:'row', backgroundColor:'transparent', width:205,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
            <Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}/>
              <Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW CATEGORY</Text>
            </View> 
</SafeAreaView>


const Transactions =()=> {
  
  //const [selectedLanguage, setSelectedLanguage] = useState();
  const [text, onChangeText] = React.useState(null);
  const [number, onChangeNumber] = React.useState(null);
  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 [isTimePickerVisible, setTimePickerVisibility] = useState(false);
  const [confirmTime, setConfirmTime] = useState(todayTime);
  const showTimePicker = () => {
    setTimePickerVisibility(true);
  };

  const hideTimePicker = () => {
    setTimePickerVisibility(false);
  };

  const handleConfirmTime = (time) => {
    
    console.log(todayTime);
    setConfirmTime(moment(time).format('LT'));
    hideTimePicker();
  };

  const [selected, setSelected] = React.useState("");

  const config: SelectConfig = {
    fontSize: 18,
    backgroundColor: 'white',
    textColor: 'black',
    selectedBackgroundColor: 'lightgrey',
    selectedTextColor: 'grey',
    selectedFontWeight: 'bold',
    placeholderTextColor:'grey'
  }
  
 const currList = [
    {text:'RM',value:'RM'},
    {text:'USD',value:'USD'},
    {text:'KRW',value:'KRW'},
    {text:'EURO',value:'EURO'},
    // {text:'RM',value:'RM'},
    // {text:'USD',value:'USD'},
    // {text:'KRW',value:'KRW'},
    // {text:'EURO',value:'EURO'},
  ];


  const [selectedItem, setSelectedItem] = useState('');

  const [income, setIncome] = useState(INC);
  const [expense, setExpense] = useState(false);
 
  
    return (
        <View style= {styles.container}>
        <View style = {{flexDirection:'row', justifyContent:'flex-start', width:'100%', marginTop:30}}>
         
        <View style={{flexDirection:'row', justifyContent:'space-between', width:'85%'}}>
         <TouchableOpacity style={{justifyContent:'space-between', width:'40%'}} onPress={()=>{ setExpense(false), setIncome(true)}}> 
            <View style={{flexDirection:'row', marginHorizontal:37}}>
            {income ? 
            <Ionics name="checkmark-circle" size={25} color="dodgerblue"/>:null}
            <Text style ={[styles.textStyle,{marginVertical:3}]}>INCOME</Text></View>
        </TouchableOpacity>

            <View style = {[styles.verticalLine,{marginHorizontal:3}]}></View>

            <TouchableOpacity style={{justifyContent:'space-between', width:'20%'}} onPress={()=>{setIncome(false), setExpense(true)}}> 
            <View style={{flexDirection:'row'}}>
            {expense ?
            <Ionics name="checkmark-circle" size={25} color="dodgerblue"/>:null}
            <Text style ={[styles.textStyle,{marginVertical:3}]}>EXPENSE</Text></View>
            </TouchableOpacity>
        </View>
        </View>

        
        <View style = {{flexDirection:'row', justifyContent:'space-between', width:'70%', marginHorizontal:50, marginTop:20}}>
            <Text style={[styles.textStyle,{marginHorizontal:20,}]}>Account</Text>
            <Text style={[styles.textStyle,{}]}>Category</Text>
        </View>

        <View style = {{flexDirection:'row',  marginHorizontal:13, marginTop:5}}>
            <TouchableOpacity style = {{flexDirection:'row'}} onPress={() => { this.RASheet.open()}}>
            <RBSheet
                ref={ref => {
                this.RASheet = ref;
                }}
          height={300}
          openDuration={250}
          closeOnDragDown={true}
          customStyles={{
            container: {
              justifyContent: "flex-start",
              height:'auto',
              
            }
          }}
        >
          <YourAccount/>
        </RBSheet>
            <View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:0}}>
            <Ionics name="wallet" size={30} color="grey" style={{marginHorizontal:25, marginTop:10}}/>
            <Text style={[styles.textStyle, {marginTop:15}]}>Account</Text>
            </View>
            </TouchableOpacity>
            <View style = {{flexDirection:'row',  marginHorizontal:0,}}>
            <TouchableOpacity style = {{flexDirection:'row', }} onPress={() => { this.RBSheet.open()}}>
              <RBSheet
                ref={ref => {
                this.RBSheet = ref;
                }}
          height={300}
          openDuration={250}
          closeOnDragDown={true}
         customStyles={{
            container: {
              justifyContent: "flex-start",
              height:'auto',
            }
          }}
        >
          {income ? 
          <IncomeCategory/>
          :null}

          {expense ? 
          <ExpenseCategory/>
          :null}
          
          </RBSheet>

          
            <View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:10}}>
            <Ionics name="pricetag" size={30} color="grey" style={{marginHorizontal:25, marginTop:10}}/>
            <Text style={[styles.textStyle, {marginTop:17}]}>Category</Text>
            </View>
            </TouchableOpacity>
        </View>

 </View>

        <View style ={{flexDirection:'row', backgroundColor:'transparent', width:370, height:120, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:13, marginTop:10}}> 
        <TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 20}} onChangeText={onChangeText} value={text}  placeholder="Add Notes" placeholderTextColor={'grey'} fontSize={20}/>
        </View>

        <View style ={{flexDirection:'row'}}> 
        <Select 
        data={currList}
        onSelect={value => setSelectedItem(value)}
        value={selectedItem}
        config={config}
        width={110}
        placeholder="RM"
        dropdownHeight={'auto'}
        dropdownStyle={{elevation:7,marginHorizontal:15,}}
        // defaultOption={{text:'RM', value:'RM'}}
        />

<View style ={{flexDirection:'row',backgroundColor:'transparent', width:270, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10}}>
            <TextInput style={{marginTop:7, fontSize:15, marginHorizontal:5}} onChangeNumber={onChangeNumber} value={number} placeholder="0" placeholderTextColor={'grey'} keyboardType="numeric" fontSize={30}></TextInput> 
           </View>
           {/* <TouchableOpacity style= {{flexDirection:'row'}}>
     

           <View style={{flexDirection:'row',backgroundColor:'transparent', width:90, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:12}}>
              <Text style={[styles.textStyle, {marginTop:18, fontSize:30, marginHorizontal: 15,}]}>RM</Text>
              <Image style={{width:10, height:10, marginTop:32,}} source={drop}></Image>
              </View>
          </TouchableOpacity>   */}
           {/*<SelectList 
      onSelect={() => alert(selected)}
      setSelected={setSelected} 
      data={eg}  
      placeholder="RM" fontSize={100}
      placeholderTextColor={'black'} 
      arrowicon={<Icon name="chevron-down" size={12} color={'black'}/>} 
      searchicon={<Icon name="search" size={12} color={'black'}/>} 
      search={false} 
      //fontSize={50}
      boxStyles={{borderRadius:5, marginHorizontal:13, height:80, width:100,borderWidth:1.5, marginTop:10}} //override default styles
      dropdownStyles={{width:100, marginHorizontal:13, borderRadius:5, borderWidth:1.5,}}
      dropdownTextStyles={{fontSize:15, justifyContent:'flex-start', color:'black'}}
      //defaultOption={{ key:'1', value:'Jammu & Kashmir' }}   //default selected option
          />*/}
        </View>
          
        {/* </View> */} 

        

        <View style = {{flexDirection:'row', justifyContent:'flex-start', marginTop:50}}>
         <View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
            <TouchableOpacity style={{justifyContent:'space-between', width:'50%',flexDirection:'row'}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}> 
            <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode="date"
                onConfirm={handleConfirmDate}
                onCancel={hideDatePicker}/>
       
            <Text style ={[styles.textStyle,{marginHorizontal:52, marginTop:3,}]}>{confirmDate}</Text>
            </TouchableOpacity>

            <View style = {[styles.verticalLine,{marginHorizontal:3}]}></View>
            <TouchableOpacity style= {{justifyContent:'space-between', width:'90%',flexDirection:'row'}} title="Show Time Picker" onPress = {()=>setTimePickerVisibility(!isTimePickerVisible)}>
            <DateTimePickerModal
                isVisible={isTimePickerVisible}
                mode="time"
                onConfirm={handleConfirmTime}
                onCancel={hideTimePicker}/>
            <Text style ={[styles.textStyle,{marginTop:3, marginHorizontal:50}]}>{confirmTime}</Text></TouchableOpacity>
            </View>
         </View>
        <View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}> 
           <TouchableOpacity style={styles.saveButton} onPress>
              <Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
           </TouchableOpacity>
        </View>
</View>

    );  
};
export default Transactions;
