import { RefreshControl } from 'react-native';
import {
  TextInput,
  StatusBar,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useIsFocused} from '@react-navigation/native';
import { useCallback, useEffect, useState } from 'react';
import AwesomeAlert from 'react-native-awesome-alerts';
import NetInfo from "@react-native-community/netinfo";
import { MenuProvider } from 'react-native-popup-menu';
import {
    Menu,
    MenuOptions,
    MenuOption,
    MenuTrigger,
} from 'react-native-popup-menu';
type sendListDataProps = {route: any,navigation: any};
function SentListPermit({route,navigation}: sendListDataProps) {
    const [refreshing, setRefreshing] = useState(false);
    const onRefresh = useCallback(() => {
        setRefreshing(true);
        setTimeout(() => {
          setRefreshing(false);
        }, 2000);
    }, []);
    const [localStorage, setLocalStorage] = useState([]);
    const [filterData, setFilterData] = useState([]);
    const [alertOffline, setAlertOffline] = useState(false);
    const [connected, setConnected] = useState(true)
    const deleteById = (name:string) => {
        setLocalStorage(oldValues => {
            return oldValues.filter((local_data:any) => local_data.company_name !== name)
        })
    };
    const removeValue = async (key:string) => {
        try {
            console.log("keyDelete",key);
          await AsyncStorage.removeItem(key)
        //   await getCount();
        } catch(e) {
        }
    };
    const getDataPermit = async () => {
        setLocalStorage([])
        try {
            const jsonValue = await AsyncStorage.getAllKeys()
            if(jsonValue.length != 0) {
                jsonValue.map((item) => {
                    if(item != "USER_DATA" && item != "my-jwt"){
                        let splited = item.split(" / ");
                        if(splited.length === 6){
                            const objectItem = {
                                id:splited[0],
                                company_name:splited[1],
                                permit_status:splited[2],
                                location:splited[3],
                                geom:splited[4].split(",")
                            }
                            console.log("aaa",objectItem);
                            
                            if(splited[5] === 'sentPermit'){
                                setLocalStorage(oldArray => [...oldArray,objectItem])
                            }
                        }
                        
                    }
                })
            }
        } catch (error) {
            
        }
        
    };
    const isFocused = useIsFocused();
    useEffect(() => {
        if(isFocused){
            getDataPermit()
            const unsubscribe = NetInfo.addEventListener((state) => {
                setConnected(state.isConnected!)
              });
              return () => {
                unsubscribe();
            };
        };
    },[isFocused])
    const [draftData, setDraftData] = useState(0);
    navigation.addListener('beforeRemove', (e:any)=> {
    })
    const [stringFilter,setStingFilter] = useState('')
    const handleSearch = (text:string) => {
        const formattedQuery = text.toLowerCase();
        const filteredData = localStorage.filter((data:any) =>
            data.case_name.toLowerCase().includes(formattedQuery)
        )
        setFilterData(filteredData)
    };
    const optionsStyles = {
        optionsContainer: {
            alignItems: 'flex-start',
            justifyContent: 'center',
            width:100,
            marginVertical:-10,
            marginLeft:-10,
            backgroundColor: '#FFFFFF',
            borderRadius: 5,
            shadowColor: '#00000040',
            shadowOffset: {
                width: 0,
                height: 2,
            },
            borderColor:'#6B5E5E4D',
            borderWidth:1,
            shadowOpacity: 0.2,
            shadowRadius: 6,
            elevation: 5,
        },
        optionText: {
            color: 'brown',
        },
    };
    return(
        <View style={styles.mainContainer}>
            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
                <View key={"Filter"} style={{paddingLeft:30,paddingTop:30,paddingRight:30,marginTop:10}}>
                    <TextInput
                        style={{
                            height: 40,
                            // borderWidth: 1,
                            padding: 10,
                            borderRadius: 50,
                            color: 'black',
                            backgroundColor:'#e6e3e3'
                        }}
                        inlineImageLeft="search"
                        inlineImagePadding={20}
                        placeholderTextColor={'#6B5E5E'}
                        placeholder='Search'
                        onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}}
                        defaultValue={stringFilter}
                    />
                </View>
                <ScrollView 
                    style={{
                        padding: 30
                    }}
                    refreshControl={
                        <RefreshControl refreshing={refreshing} />
                    }
                >
                    { 
                        localStorage.length != 0 ? 
                        localStorage.map((item:any,index:number) => (
                        <View key={index}>
                            <View style={{flexDirection:'row'}}>
                                <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Company Name</Text>
                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Permit Status</Text>
                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Location</Text>
                                </View>
                                <View style={{ flexDirection:'column',paddingLeft:0,width:'65%'}}>
                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.company_name}</Text>
                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.permit_status}</Text>
                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.location}</Text>
                                </View>
                                <View style={{ marginLeft:'55%',marginTop:0,width:150,height:100,position:'absolute'}}>
                                    <MenuProvider skipInstanceCheck={true} style={{flexDirection:'column'}}>
                                        <Menu>
                                            <MenuTrigger>
                                                <Image
                                                    style={{justifyContent:'center',alignSelf:'flex-end'}}
                                                    source={require('../../assets/icon/Actions.png')}
                                                    resizeMode='cover'
                                                />
                                            </MenuTrigger>
                                            <MenuOptions customStyles={optionsStyles}>
                                                <MenuOption
                                                    onSelect={()=>{
                                                        navigation.navigate('Permit Editing',{ screen: 'Edit',data: {
                                                            id:item.id,
                                                            company_name:item.company_name,
                                                            permit_status:item.permit_status,
                                                            location:item.location,
                                                        }});
                                                    }}
                                                    children={
                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                                                            <Image source={require('../../assets/icon/edit.png')} />
                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Edit</Text>
                                                        </View>} 
                                                />
                                                <View style={{marginVertical: 5, width:85,
                                                marginHorizontal: 2,
                                                borderBottomWidth: 1,
                                                borderColor: '#ccc'}}
                                                />
                                                <MenuOption
                                                    onSelect={()=> {
                                                        deleteById(item.company_name);
                                                        removeValue(item.id+" / "+item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / sentPermit");
                                                    }}
                                                    children={
                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                                                            <Image source={require('../../assets/icon/dell.png')} />
                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Delete</Text>
                                                        </View>
                                                    }
                                                />
                                            </MenuOptions>
                                        </Menu>
                                    </MenuProvider>
                                </View>
                            </View>
                            <View
                                style={{
                                    marginTop: 10,
                                    marginBottom: 10,
                                    borderBottomColor: '#E2E2E2',
                                    borderBottomWidth: 2,
                                }}
                            />
                            </View> 
                            ))
                        :
                        <View style={{alignItems:'center',padding:20}}>
                            <Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text>
                        </View>
                    }
                    
                </ScrollView>
            </View>
            
            <AwesomeAlert
                show={alertOffline}
                showProgress={false}
                title="You are offline"
                message="You need connection for Resend Data."
                closeOnTouchOutside={false}
                closeOnHardwareBackPress={false}
                showConfirmButton={true}
                confirmText="Ok"
                confirmButtonColor="#DD6B55"
                onConfirmPressed={() => {
                    setAlertOffline(false);
                }}
                overlayStyle={{width:'100%'}}
                contentContainerStyle={{width:'70%',borderRadius:10}}
                titleStyle={{fontSize:20}}
                messageStyle={{fontSize:16}}
            />
        </View>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ecf0f1',
        padding: 10,
      },
    mainContainer: {
        flex: 1,
    },
    title: {
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        fontWeight: 'bold',
        fontSize: 22,
        color: 'black',
        marginBottom: 10
    },
    input: {
        height: 40,
        borderWidth: 1,
        padding: 10,
        borderRadius: 50,
        color: 'black'
    },
});
export default SentListPermit;