import React, { useEffect, useState } from "react";
import { Button, View, StyleSheet, Pressable, Modal, Alert, TextInput, Text,Image, Linking, SectionList, TouchableOpacity, ScrollView, Dimensions} 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 { render } from "react-dom";
import Animated from "react-native-reanimated";

// import {openDatabase} from 'react-native-sqlite-storage';
// import { TextInput } from "react-native-gesture-handler";

// const db = openDatabase({
//   name:"rn_sqlite",

// });

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');
// const deviceWeight = Dimensions.get("window").width;
// const deviceHeight =
//   Platform.OS ===""

export default function CategoriesScreen({ navigation }) {
  const addCategoryAlert = () =>
  Alert.alert(
    "Add new category",
    "Category added"
    [
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      { text: "SAVE", onPress: () => console.log("SAVE Pressed") }
    ]
  );
   
  const editButtonAlert = () =>
    Alert.alert(
      
      "Edit Category",
      "My Alert Msg",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "SAVE", onPress: () => console.log("SAVE Pressed") }
      ]
   ); 

   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 [isModalVisible, setModalVisible] = useState(false);

   const toggleModal = () => {
   setModalVisible(!isModalVisible);
   };

   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'
      },
    ]
   }

  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}} onPress={toggleModal}>    
            {/* <Modal 
             isVisible={isModalVisible} 
             onSwipeComplete={() =>setModalVisible(false)} 
             swipeDirection="left"
             style={{width:'50%', height:'50%',}}
             > */}
      {/* <View style={{flex:1, width:'100%', height:'100%', justifyContent:'center', alignContent:'center', alignItems:'center', backgroundColor:'white'}}>
      <Text>Heello</Text></View> */}
{/* </Modal> */}
              <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>
    </View>
     )
  }

     return (
        <View style = {[styles.container]}>
         <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}} onPress={addCategoryAlert}>
             <Image style={{width:30, height:30}} source = {plus}></Image>
          </TouchableOpacity>
          
       </View> 
    );
  }
  
