import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid, Platform, button} from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen';
import AddItemScreen from '../AddItemScreen';
const plusbutton = require('../../images/plusbutton.png');
const tick = require('../../images/tick.png');
const oil = require('../../images/oil.png');
const cat = require('../../images/cat.jpg');
// const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png');

const ItemScreen = ({navigation}) => {
  const [addItemVisible, setAddItemVisible] = useState(false);
  const addItemModal = () => {
    if(addItemVisible){
      return(
        <Modal
          animationType='none'
          transparent={true}
          visible={addItemVisible}
          onRequestClose={()=> {
            setAddItemVisible(!addItemVisible)
          }}>
            <View
              style={{
                height:'100%', 
                width:'100%', 
                backgroundColor:'rgba(192,192,192,0.8)', 
                justifyContent:'center', 
                alignItems:'center'
              }}>
                <TouchableOpacity
                  style={{
                    height:'100%', 
                     width:'100%', 
                     position:'absolute', 
                     top:0, 
                     flex:1
                  }}
                    onPress ={()=> setAddItemVisible(false)}
                />
                 <View 
                  style={{backgroundColor:'white',
                  width:"90%",
                  height:300,
                  justifyContent:'flex-start',
                  // position:'absolute',
                  // bottom:0,
                  borderRadius:20,
                  }}>
                    <Text 
                     style={{
                      fontFamily:'Poppins-SemiBold', 
                      fontSize:20, 
                      color:'black', 
                      alignSelf:'center', 
                      marginTop:20
                     }}>
                       Photo
                   </Text>
                         <TouchableOpacity
                           style={{
                            marginHorizontal:40,
                            flexDirection:'row',
                            marginTop:20,
                           }}
                             onPress={()=> setEditModalVisible(true)}
                           >
                             <MaterialCommunityIcons
                               name="camera"
                               size={30}
                               color="#838383"
                             />
                              <Text 
                                style={{
                                  alignSelf:'center', 
                                  textAlignVertical:'center', 
                                  marginHorizontal:30, 
                                  fontFamily:'Poppins-Regular', 
                                  fontSize:20, 
                                  color:'black', 
                                  marginTop:5
                                }}>
                                   Rename
                              </Text> 
                         </TouchableOpacity>
                         <TouchableOpacity
                           style={{
                            marginHorizontal:40,
                            flexDirection:'row',
                            marginTop:20,
                           }}
                             onPress={()=>setDeleteModalVisible(true)}
                            >
                             <MaterialCommunityIcons
                               name="delete"
                               size={30}
                               color="#c60000"
                             />
                              <Text 
                                style={{
                                  alignSelf:'center', 
                                  textAlignVertical:'center', 
                                  marginHorizontal:30, 
                                  fontFamily:'Poppins-Regular', 
                                  fontSize:20, 
                                  color:'#c60000', 
                                  marginTop:5
                                }}>
                                   Delete
                              </Text> 
                         </TouchableOpacity>
                 </View>
            </View>
        </Modal>
      )
    }
  }
    return(
        <View
          style={
            styles.container
          }>
            <View
              style={
                styles.itemCard
              }>
               <TouchableOpacity
                 style={
                   styles.checkContainer
                 }>
                  <Ionicons 
                    name="checkmark"
                    color="dodgerblue"
                    size={20}
                  />
               </TouchableOpacity>
                                 <Text
                                   style={[
                                    styles.textList,
                                    {color:'black',
                                     width:'55%'
                                    }
                                   ]}>
                                     Sunflower oil 
                                 </Text>
                                       <Text
                                         style={[
                                          styles.textList,
                                          {color:'black',
                                           width:'7%',
                                          }
                                         ]}>
                                            10
                                       </Text>
                                             <TouchableOpacity
                                               style={
                                                styles.imageCointainer
                                               }>
                                                <Image 
                                                  style={{
                                                    width:50, 
                                                    height:50, 
                                                    borderRadius:100
                                                  }} 
                                                    source={oil}
                                                />
                                             </TouchableOpacity>
                                                               <TouchableOpacity
                                                                 style={{
                                                                   justifyContent:'center',
                                                                   alignItems:'center',
                                                                   alignContent:'center',
                                                                   right:2,
                                                                  }}>
                                                                    <MaterialIcons 
                                                                      name="more-vert"
                                                                      color="grey"
                                                                      size={30}
                                                                    />
                                                               </TouchableOpacity>
            </View>
            <TouchableOpacity style={{backgroundColor:'red', width:50, height:50, borderRadius:100}} 
            // onPress={() => navigation.navigate('AddItemScreen')}
            onPress={() => setAddItemVisible(true)}

            ></TouchableOpacity>
            {addItemModal()}
        </View>
    );
};

const styles = StyleSheet.create({
    container:{
      backgroundColor:'white',
      flex:1,
    },
    itemCard:{
      backgroundColor:'white',
      width:'100%',
      height:70,
      elevation:7,
      marginTop:5,
      flexDirection:'row',
    },
    textList:{
      fontFamily:'Poppins-SemiBold',
      fontSize:15,
      textAlignVertical:'center',
    },
    checkContainer:{
      backgroundColor:'white',
      borderRadius:100,
      borderWidth:2,
      borderColor:'dodgerblue',
      height:25,
      width:25,
      justifyContent:'center',
      alignItems:'center',
      alignContent:'center',
      marginHorizontal:15,
      marginTop:22,
    },
    imageCointainer:{
      width:60,
      height:60,
      borderRadius:100,
      borderColor:'white',
      borderWidth:0.1,
      justifyContent:'center',
      alignItems:'center',
      alignContent:'center',
      marginTop:5,
    },
});
export default ItemScreen;