import React, { useEffect, } from 'react'
import { View, ActivityIndicator, BackHandler, StyleSheet, NativeAppEventEmitter, } from 'react-native'
import { useSelector, useDispatch } from 'react-redux'
import { LoadingGlobalModalStateM, } from '../../models/stateModels'
import { LoadingGlobalModalAC, } from '../../redux/actionCreators'
import c from '../../color/colors'
import t, { languageConfig, } from '../../translator/translator'

type Props = {
    isShowModal: Boolean,
}

let backHandler: NativeAppEventEmitter = null

export default LoadingGlobalModal = (props: Props) =>
{
    const reduxState: LoadingGlobalModalStateM = useSelector(state => { return state.LoadingGlobalModalState })
    const dispatch = useDispatch()

    useEffect(() =>
    {
        if(reduxState.isShowModal)
            backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
        else
            backHandler?.remove()
    }, [ reduxState.isShowModal ])

    function showModal()
    {
        dispatch(LoadingGlobalModalAC.toggleVisibility(true))
    }

    function closeModal()
    {
        dispatch(LoadingGlobalModalAC.toggleVisibility(false))
    }

    return (
        <>
        {
            reduxState.isShowModal
            &&
            <View style={ styles.container }>
                <ActivityIndicator
                    color = { c().main_yellow }
                    size = 'large'
                />
            </View>
        }
        </>
    )
}
LoadingGlobalModal.defaultProps = {

}



const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: c().main_black + 'B3',
    },
})
