import React, { useEffect, useRef, useState, memo, Component, Fragment } from "react";
import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback, Button, View, Text, Image, TouchableOpacity, TextInput, FlatList, SafeAreaView, Alert} 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 {Picker} from 'react-native-custom-picker';
import Overlay from 'react-native-modal-overlay';
// import { Modal, Portal, Provider } from 'react-native-paper';
import Modal from 'react-native-modal';

// 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 walletacc = require ('../../images/walletacc.png');
// const cashacc = require ('../../images/cashacc.png');
// const debitacc = require ('../../images/debitacc.png');
// const cardacc = require ('../../images/cardacc.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 addTransactions = () =>{
//   navigation.navigate('dashboard',{
//      name:'Edit Transactions',
//   });
// };

const ACC = [
  {
     id:'0',
     title:'Cash',
     image:require ('../../images/cashacc.png'),
     balance:'RM600.00',

  },
  {
     id:'1',
     title:'Card',
     image:require ('../../images/cardacc.png'),
     balance:'RM600.00',
  },
  {
     id:'2',
     title:'Wallet',
     image:require ('../../images/walletacc.png'),
     balance:'RM600.00',
  },
  {
     id:'3',
     title:'Debit',
     image:require ('../../images/debitacc.png'),
     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 CURRENCY = [
  {label:'RM',value:'RM'},
  {label:'USD',value:'USD'},
  {label:'KRW',value:'KRW'},
  {label:'EURO',value:'EURO'},
  {label:'TEST',value:'TEST'},
  {label:'TRY',value:'TRY'},
  {label:'CUBA',value:'CUBA'},
  // {label:'GFDFVF',value:'FGDFDWERDDF'},
];

const Transactions =()=> {
  const [strAccSelected, setStrAccSelected] = useState('Account');
  const [imgAccSelected, setImgAccSelected] = useState (acc);
  const [strCatSelected, setStrCatSelected] = useState('Category');
  const [imgCatSelected, setImgCatSelected] = useState(tag);
  const [income, setIncome] = useState(INC);
  const [expense, setExpense] = useState(false);
  const [strCurrSelected, setStrCurrSelected] = useState('RM');
  const [currListVisible, setCurrListVisible] = useState(false);
  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 renderItem = ({ item }) => (
    <SafeAreaView>
               <View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}>
                   <TouchableOpacity style={{flexDirection:'row',marginBottom:10}} onPress={()=>{setStrAccSelected(item.title),setImgAccSelected(item.image)}}>
                       <View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:100,width:40, height:40, marginLeft:10, marginRight:10,justifyContent:'space-between'}}>
                       <Image style={{width:25,height:25, marginHorizontal:7, marginTop:6}} source={item.image}/></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={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
        <TouchableOpacity style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}} onPress={()=>{setStrCatSelected(item.type), setImgCatSelected(item.image)}}>
          <Image source={item.image} style={styles.img}/>
        </TouchableOpacity>
      </View>
         <View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
            <Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
         </View>
    </SafeAreaView>
  );
  
  const renderItem2 = ({item}) =>(
    <SafeAreaView>
      <View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
        <TouchableOpacity style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}} onPress={()=>{setStrCatSelected(item.type), setImgCatSelected(item.image)}}>
           <Image source={item.image} style={styles.img}/>
        </TouchableOpacity>
      </View>
         <View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
            <Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
         </View>
    </SafeAreaView>
    
  );

  const YourAccount = () => 
         <SafeAreaView>
          <Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>     
           <FlatList
          data={ACC}
          renderItem={renderItem}
          keyExtractor={item => item.id}
           />
  
        <TouchableOpacity 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>
                </TouchableOpacity>
         </SafeAreaView>
  
  const IncomeCategory = () => 
  <SafeAreaView>
    <Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
    <FlatList
          data={INC}
          renderItem={renderItem1}
          keyExtractor={item => item.id}
          numColumns={3}
        />
              <TouchableOpacity 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>
              </TouchableOpacity> 
  </SafeAreaView>
  
  const ExpenseCategory = () => 
  <SafeAreaView>
  <Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
  <FlatList
          data={EXP}
          renderItem={renderItem2}
          keyExtractor={item => item.id}
          numColumns={3}
        />
        <TouchableOpacity 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>
              </TouchableOpacity> 
  </SafeAreaView>


  const renderCurrency = ({ item }) => (
    <SafeAreaView>
          
            <TouchableOpacity onPress={()=>{setStrCurrSelected(item.label)}}>
             <Text style={{marginTop:10, fontSize:20, justifyContent:'center', alignItems:'center', marginHorizontal:100}}>{item.label}</Text>
            </TouchableOpacity>
            <View style={[styles.dividerLine,{marginTop:20}]}></View>
                      
    </SafeAreaView>
  );

  const ListCurrency = () => { 
  if (currListVisible){
  return(
     <SafeAreaView style={{position:'absolute', height:'100%', width:'100%', backgroundColor:'rgba(192,192,192,0.8)', justifyContent:'center', alignItems:'center'}}>
       <TouchableOpacity style={{height:'100%', width:'100%'}} onPress={()=>{setCurrListVisible(false)}}></TouchableOpacity>
       <View style={{backgroundColor:'white', borderRadius:5, justifyContent:'center', marginHorizontal:20, width:'70%', height:'30%', marginTop:0, borderWidth:0.5, borderColor:'white', elevation:2, position:'absolute',}}>
            <FlatList     
               data={CURRENCY}
               renderItem={renderCurrency}
               keyExtractor={item => item.id}
              />
              </View>
 </SafeAreaView>
     );
   };
 };

    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}}>
            <Image source={imgAccSelected} style={{width:30, height:30, marginHorizontal:23, marginTop:13}}></Image>
            <Text style={[styles.textStyle, {marginTop:17}]}>{strAccSelected}</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}}>
            <Image source={imgCatSelected} style={{width:25, height:25, marginTop:15, marginHorizontal:15}}/>
            <Text style={[styles.textStyle, {marginTop:17}]}>{strCatSelected}</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'}}>
        <TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>{setCurrListVisible(true)}}>
           <View style={{flexDirection:'row', width:'100%', justifyContent:'space-between'}}>
               <View style={{flexDirection:'row', width:'80%'}}>
                 <Text style={{marginTop:24, fontSize:20, marginHorizontal:5}}>{strCurrSelected}</Text>  
             </View>
                   <View style={{flexDirection:'row', width:'30%'}}>
                      <Image style={{width:15, height:15, marginTop:30}} source={drop}></Image>
                   </View>
            </View>
       </TouchableOpacity>
      


      
         <View style ={{flexDirection:'row',backgroundColor:'transparent', width:"65%", height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginRight:10}}>
            <TextInput style={{marginTop:7, fontSize:15, marginHorizontal:5}} onChangeNumber={onChangeNumber} value={number} placeholder="0" placeholderTextColor={'grey'} keyboardType="numeric" fontSize={30}></TextInput> 
           </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 ={() => navigation.navigate("Dashboard")} */}
              <Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
           </TouchableOpacity>
        </View>
        <ListCurrency/>
</View>

    );  
};
export default Transactions;
