import * as React from 'react';
import { useState } from 'react';
import { Button, View, Text, SectionList, Image, TouchableOpacity, TextInput} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import DashboardScreen from '../home';
import Transactions from '.';
import styles from './style';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import RBSheet from 'react-native-raw-bottom-sheet';
import moment from 'moment/moment';

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 onPress = ()=>console.log('press');


const YourAccount = () => 
       <View>
         <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}}>
                <Image style={{width:30, height:30, marginHorizontal:5, marginVertical:14}} source={addacc}></Image>
                 <Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text>
              </View>
       </View>

const YourCategory = () => 
<View>
  <Text style={{fontSize:20, fontWeight:'600', marginTop:20, 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:'#00468b', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
                <Image style={{width:45, height:45, marginHorizontal:8, marginTop:9, justifyContent:'center', marginBottom:20}} source={awards}/>
                  <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16, marginHorizontal:5}}>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}}>
                <Image style={{width:50, height:50, marginHorizontal:5, marginTop:7, justifyContent:'center', marginBottom:16}} source={coupon}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row',justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>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'}}>
                     <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}}>
                <Image style={{width:40, height:40, marginHorizontal:10, marginTop:7, justifyContent:'center', marginBottom:26}} source={refund}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>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, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
                <Image style={{width:35, height:35, marginHorizontal:10, marginTop:38, justifyContent:'center', marginBottom:20}} source={sale}/>
                <View style={{flexDirection:'column'}}>
                     <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                       <Text style={{color:'black', fontSize:16}}>Sale</Text>
                     </View>
                  </View>
              </View>       
           </TouchableOpacity>

           
           </View>
      </View> 

            <View style ={{flexDirection:'row', backgroundColor:'transparent', width:205,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:50}}>
              <Image style={{width:30, height:30, marginHorizontal:5, marginVertical:14}} source={addacc}></Image>
              <Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW CATEGORY</Text>
            </View>
</View>


const EditTransactions =()=> {

  const [text, onChangeText] = React.useState(null);
  const [number, onChangeNumber] = React.useState(null);
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [confirmDate, setConfirmDate] = useState(new Date());
  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

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

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

 

    return (
        <View style= {styles.container}>
        <View style = {{flexDirection:'row', justifyContent:'flex-start', width:'100%', marginTop:20}}>
        <TouchableOpacity>
            <Text style ={[styles.textStyle,{marginTop:10, marginHorizontal:50, }]}>EXPENSE</Text></TouchableOpacity>
            <View style = {[styles.verticalLine,{marginHorizontal:30}]}></View>
            <TouchableOpacity>
            <Text style ={[styles.textStyle,{marginTop:10, marginHorizontal:50}]}>INCOME</Text></TouchableOpacity>
        </View>
        <View style = {{flexDirection:'row', justifyContent:'space-between', width:'70%', marginHorizontal:50, marginTop:40}}>
            <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:450,
              
            }
          }}
        >
          <YourAccount/>
        </RBSheet>
       
            <View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'green', borderRadius:6, marginHorizontal:0}}>
            <Image source={acc} style={{width:30, height:30, justifyContent:'center', alignItems:'center', marginTop:12, marginHorizontal:23}}></Image>
            <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:520,
              
            }
          }}
        >
          <YourCategory/>
          </RBSheet>
            <View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'green', borderRadius:6, marginHorizontal:10}}>
            <Image source={tag} style={{width:26, height:26, justifyContent:'center', alignItems:'center', marginTop:15, marginHorizontal:25}}></Image>
            <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:'green', 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', backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'green', borderRadius:6, marginHorizontal:13, marginTop:10}}> 
        
           <TouchableOpacity style= {{flexDirection:'row'}}>
           
              <Text style={[styles.textStyle, {marginTop:18, fontSize:30, marginHorizontal: 10,}]}>RM</Text>
           
              <Image style={{width:10, height:10, marginTop:32,}} source={drop}></Image>
          
           </TouchableOpacity>
        
           <View style ={{backgroundColor:'transparent', width:263, height:80, borderWidth:1.5, borderColor:'green', borderRadius:6, marginHorizontal:35}}>
            <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', width:'100%', marginTop:20}}>
         <Text></Text>
            <TouchableOpacity title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}> 
            <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirmDate}
        onCancel={hideDatePicker}
      />
       
            <Text style ={[styles.textStyle,{marginTop:10, marginHorizontal:50}]}>Nov 19, 2022</Text>
            </TouchableOpacity>

            <View style = {[styles.verticalLine,{marginHorizontal:10}]}></View>
            <TouchableOpacity>
            <Text style ={[styles.textStyle,{marginTop:10, marginHorizontal:50}]}>00:51 AM</Text></TouchableOpacity>
        </View>

        <TouchableOpacity><Text></Text></TouchableOpacity>
        </View>
      
    );
};

export default EditTransactions;