import React, { useState } from "react";
import { Button, View, StyleSheet, Pressable, Modal, Alert, TextInput, Text,Image, Linking, SectionList, TouchableOpacity, ScrollView} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import styles from '../categories/style';
import { Menu, Divider, Provider } from 'react-native-paper';
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 {showAlert, closeAlert} from 'react-native-customisable-alert';
import AlertPro from "react-native-alert-pro";
// import { TextInput } from "react-native-gesture-handler";

const plus = require ('../../images/plus.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/train.png');
const cash = require ('../../images/money.png');
const bill = require('../../images/bill.png');
const phone = require ('../../images/phone.png');
const cart = require ('../../images/shoppingcart.png');
const health = require ('../../images/firstaidkit.png');
const rent = require ('../../images/rent.png');
const coupon = require ('../../images/coupon.png');
const sale = require ('../../images/sale.png');
const awards = require ('../../images/medal.png');
const allowance = require ('../../images/salary.png');
const salary = require ('../../images/cheque.png');
const refund = require ('../../images/refund.png');
const edu = require ('../../images/education.png');
const grant = require ('../../images/grant.png');

const onPress = () => console.log('press');

export default function CategoriesScreen({ navigation }) {

   
  {/* const editButtonAlert = () =>
    Alert.alert(
      
      "Edit Category",
      "My Alert Msg",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
   ); */} {/*onPress={editButtonAlert}*/}

   const deleteButtonAlert = () =>
    Alert.alert(
      
      "Delete this category?",
      "Deleting this category will also delete all records and budgets for this category. Are you sure?",
      [
        {
          text: "NO",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "YES", onPress: () => console.log("OK Pressed") }
      ],
      {cancelable:false}
   ); 

   const INCOME={
      title: 'Income Categories',
      data:[
      {
       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:"Grants",
      //   image: require ('../../images/grant.png')
      // },
     ]
    }

   const EXPENSE = {
    title:"Expense Categories",
    data:[
      {
        id:"7",
        type:"Shopping",
        image: require('../../images/shoppingcart.png')
      },
      {
        id:"8",
        type:"Education",
        image:require('../../images/education.png')
      },
      {
        id:"9",
        type:"Transportation",
        image: require('../../images/train.png')
      },
      {
        id:"10",
        type:"Food",
        image:require('../../images/cutlery.png')
      },
      {
        id:"11",
        type:"Telephone",
        image: require('../../images/phone.png')
      },
      {
        id:"12",
        type:"Bills",
        image:require('../../images/bill.png')
      },
      {
        id:"13",
        type:"Health",
        image: require('../../images/firstaidkit.png'),
        backgroundColor:'yellow'
      },
    ]
   }

  //  onPress={deleteButtonAlert}

  // state = {
  //   modalVisible: false
  // };

  // setModalVisible(visible) {
  //   this.setState({ modalVisible: visible });
  
  // }

  //const [modalVisible, setModalVisible] = useState(false);
  
  // <Modal
  //       animationType="slide"
  //       transparent={true}
  //       visible={modalVisible}
  //       onRequestClose={() => {
  //         Alert.alert("Modal has been closed.");
  //         setModalVisible(modalVisible);
  //       }}
  //     ></Modal>

  

   const renderItem = ({item}) => {
    return(
      

      <View style={{flexDirection:'column', justifyContent:'space-between'}}>
    <View style={[styles.item]}>
     <View style={{borderWidth:0.5,borderColor:'grey',borderRadius:100, width:50, height:50}}>
      <Image source={item.image} style={[styles.img,{marginHorizontal:10, marginVertical:10}]}/></View>
      <Text style ={{fontSize:19, fontWeight:'300',color:'black', marginHorizontal:15, marginVertical:15}}>{item.type}</Text>
      <View style={{flexDirection:'row', justifyContent:'flex-end', marginLeft:'auto', marginVertical:15}}>
      <TouchableOpacity style ={{backgroundColor:'#e8f4f8', width:25, height:25,marginHorizontal: 0,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}>
                                    
         <MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginHorizontal:5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}>
         <MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity></View>
    </View>
    {/* onPress={() => this.AlertPro.open()} */}
    {/* <AlertPro
          ref={ref => {
            this.AlertPro = ref;
          }}
          onConfirm={() => this.AlertPro.close()}
          title="Delete this category?"
          message="Deleting this category will also delete all records and budgets for this category. Are you sure?"
          textCancel="Cancel"
          textConfirm="Delete"
          customStyles={{
            mask: {
              backgroundColor: "transparent"
            },
            container: {
              borderWidth: 1,
              borderColor: "white",
              shadowColor: "#000000",
              shadowOpacity: 0.2,
              shadowRadius: 10,
              elevation:7
            },
            buttonCancel: {
              backgroundColor: "red"
            },
            buttonConfirm: {
              backgroundColor: "dodgerblue"
            }
          }}
        /> */}
    </View>
     )
     }

    return (
      
        <View style = {[styles.container]}>
          {/* <View style={styles.centeredView}>
  <Modal
    animationType="slide"
    transparent={true}
    visible={modalVisible}
    onRequestClose={() => {
      Alert.alert("Modal has been closed.");
      setModalVisible(!modalVisible);
    }}
  >
    <View style={styles.centeredView}>
      <View style={styles.modalView}>
      <Text style={{fontSize:19, fontWeight:'600', color:'black', marginTop:10}}>Delete this category?</Text>
        <Text style={styles.modalText}>Deleting this category will also delete all records and budgets for this category. Are you sure?</Text>
        <View style={{flexDirection:'row'}}>
        <Pressable
          style={[styles.button, styles.buttonClose]}
          onPress={() => setModalVisible(!modalVisible)}
        >
          <Text style={styles.textStyle}>NO</Text>
        </Pressable>
        <Pressable
          style={[styles.button, styles.buttonClose]}
          onPress={() => setModalVisible(!modalVisible)}
        >
          <Text style={styles.textStyle}>YES</Text>
        </Pressable>
        </View>
      </View>
    </View>
  </Modal>
  <Pressable
    style={[styles.button, styles.buttonOpen]}
    onPress={() => setModalVisible(true)}
  >
    <Text style={styles.textStyle}>Show Modal</Text>
  </Pressable>
</View> */}
         <SectionList
          sections={[INCOME, EXPENSE]}
           keyExtractor={(item, index) => item + index}
          renderItem={renderItem}
          renderSectionHeader={({ section: {title}}) => (
            <View>
            <Text style={styles.sectionHeader}>{title}</Text>
            <View style={styles.dividerLine}></View>
            </View>
          )}
         />
         <TouchableOpacity style={{backgroundColor:'white', elevation:7, width:70, height:70,justifyContent:'center', alignItems:'center', position:'absolute', borderRadius:100, bottom:20, left:310, marginTop:210}}>
             <Image style={{width:30, height:30}} source = {plus}></Image>
          </TouchableOpacity>
          
       </View> 
   
         //  {/* <View style = {[styles.containerTop,{marginTop:10}]}>
         //    <ScrollView showsVerticalScrollIndicator = {false}>
         //      <View>
         //        <Text style={[styles.textStyle,{marginVertical:5}]}>Income categories</Text>
         //        <View style={[styles.dividerLine,{}]}></View>
         //      </View>
         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //              <Image style={{width:25, height: 25}} source={allowance}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Allowance</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:140, marginVertical:9, justifyContent:'space-between'}}> 
         //                      <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>

         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <Ionics name="trophy" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Awards</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:161, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>

         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#ff8000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <MaterialCommunityIcons name="ticket" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Coupons</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:150, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>
         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#8b0000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <MaterialCommunityIcons name="cash-refund" size={29} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Refunds</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:155, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>

         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //              <Image style={{width:25, height:25}} source={salary}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Salary</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:171, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>

         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //              <Image style={{width:27,height:27}} source={rent}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Rental</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:168, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>

         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <MaterialCommunityIcons name="sale" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Sale</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:184, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>

         //    <View style={{marginTop:15}}>
         //        <Text style={[styles.textStyle,{ }]}>Expense categories</Text>
         //        <View style={[styles.dividerLine,{marginVertical:5}]}></View>
         //    </View>
            
         //    <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <Ionics name="cart" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Shopping</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:147, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>
         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <Icon name="graduation-cap" size={25} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Education</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:142, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>
         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#ff8000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <Ionics name="bus" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Transportation</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:108, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>
         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#8b0000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <Ionics name="fast-food" size={30} color="white" style={{marginVertical:0, marginHorizontal:5}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Food</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:178, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>
         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <Ionics name="call" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}
         //      />
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Telephone</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:139, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>
         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <MaterialCommunityIcons name="receipt" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}
         //      />
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Bills</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:185, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>

         //        <View style ={{flexDirection:'row', marginVertical:10}}>
         //           <View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
         //           <Icon name="medkit" size={28} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
         //           </View>
         //              <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
         //                 <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Health</Text>
         //                    <View style={{flexDirection: 'row', marginHorizontal:167, marginVertical:9}}> 
         //                    <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
         //                      <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
         //                    </View>
         //              </View>
         //        </View>
                
                   
                
               
          
           
         //    </ScrollView>
         //    </View>
         //    */}

         //    </View>
            
    );
    
     
  } 
// }