import React, { useEffect, } from 'react'
import { Text, View, TouchableOpacity, BackHandler, StyleSheet, NativeAppEventEmitter, } from 'react-native'
import { BottomModal, SlideAnimation, } from 'react-native-modals'
import { useSelector, useDispatch } from 'react-redux'
import { AppGlobalStateM, LangGlobalModalStateM, } from '../../models/stateModels'
import { LangGlobalModalAC, } from '../../redux/actionCreators'
import c from '../../color/colors'
import t, { languageConfig, } from '../../translator/translator'

type Props = {
    isShowModal: Boolean,
}

let backHandler: NativeAppEventEmitter = null

export default LangGlobalModal = (props: Props) =>
{
    const reduxState: LangGlobalModalStateM = useSelector(state => state.LangGlobalModalState)
    const appGlobalState: AppGlobalStateM = useSelector(state => state.AppGlobalState)
    const dispatch = useDispatch()

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

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

    function onPressLang(langKey: String)
    {
        languageConfig.changeLanguage(langKey)
    }


    return (
        <BottomModal
            visible = { reduxState.isShowModal }
            onTouchOutside = { () => closeModal() }
            height = { 200 }
            swipeDirection = { ['down'] }
            modalAnimation = { new SlideAnimation({
                slideFrom: 'bottom',
            }) }
            onSwipeOut = { closeModal }
        >
            <View style={ styles.container }>

                <View style={ styles.modalHeaderView }>
                    <Text style={ styles.modalHeaderText }>{ t().Choose_content_language() }</Text>
                </View>

                <View style={ styles.modalbodyView }>

                    {/* <TouchableOpacity
                        style = { styles.langBtn }
                        // onPress = { () => onPressLang('az') }
                        onPressOut = { () => onPressLang('az') }
                    >
                        <Text style={ styles.langBtnTextIcon }>🇦🇿</Text>
                        <Text style={ styles.langBtnText }>{ t().AZERBAIJAN() }</Text>
                        {
                            appGlobalState.langKey == 'az' ?
                            <View style={ styles.langBtnRadioViewSelected }/>
                            : <View style={ styles.langBtnRadioView }/>
                        }
                    </TouchableOpacity>

                    <View style={ styles.modalItemSeperator }/> */}

                    <TouchableOpacity
                        style = { styles.langBtn }
                        onPressOut = { () => onPressLang('en') }
                    >
                        <Text style={ styles.langBtnTextIcon }>🇺🇸</Text>
                        <Text style={ styles.langBtnText }>{ t().ENGLISH() }</Text>
                        {
                            appGlobalState.langKey == 'en' ?
                            <View style={ styles.langBtnRadioViewSelected }/>
                            : <View style={ styles.langBtnRadioView }/>
                        }
                    </TouchableOpacity>

                    <View style={ styles.modalItemSeperator }/>

                    <TouchableOpacity
                        style = { styles.langBtn }
                        onPressOut = { () => onPressLang('ru') }
                    >
                        <Text style={ styles.langBtnTextIcon }>🇷🇺</Text>
                        <Text style={ styles.langBtnText }>{ t().RUSSIAN() }</Text>
                        {
                            appGlobalState.langKey == 'ru' ?
                            <View style={ styles.langBtnRadioViewSelected }/>
                            : <View style={ styles.langBtnRadioView }/>
                        }
                    </TouchableOpacity>

                </View>

            </View>
        </BottomModal>
    )
}
LangGlobalModal.defaultProps = {

}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: c().main_dark,
        zIndex: 10,
    },
    modalHeaderView: {
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
    },
    modalHeaderText: {
        fontWeight: 'bold',
        color: c().main_light_gray,
    },
    modalbodyView: {
        paddingHorizontal: 16,
    },
    langBtn: {
        height: 50,
        paddingHorizontal: 16,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: c().main_dark_gray,
        borderRadius: 16,
        zIndex: 100,
    },
    langBtnTextIcon: {
        fontSize: 18,
    },
    langBtnText: {
        flex: 1,
        paddingHorizontal: 10,
        fontSize: 12,
        fontWeight: 'bold',
        color: c().main_white,
    },
    langBtnRadioView: {
        height: 20,
        aspectRatio: 1,
        borderWidth: 2,
        borderColor: c().main_yellow,
        borderRadius: 10,
    },
    langBtnRadioViewSelected: {
        height: 20,
        aspectRatio: 1,
        backgroundColor: c().main_black,
        borderWidth: 7,
        borderColor: c().main_yellow,
        borderRadius: 10,
    },
    modalItemSeperator: {
        height: 8,
    },
})
