import React, { Component } from 'react'
import { Text, View, TouchableOpacity, Image, SafeAreaView, Alert, StyleSheet, Keyboard, Platform, } from 'react-native'
import { StackNavigationProp, } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { BlurView, } from '@react-native-community/blur'

import c from '../../color/colors'
import t from '../../translator/translator'

const Tab = createBottomTabNavigator()

import BasePurePage from '../BasePurePage'
import TabHeaderView from '../../components/headers/TabHeaderView'
import Tab_1_Page from '../tab_1_Page/Tab_1_Page'
import Tab_2_Page from '../tab_2_Page/Tab_2_Page'
import Tab_4_Page from '../tab_4_Page/Tab_4_Page'
import Tab__Page from '../tab__Page/Tab__Page'

type Props = {
    navigation: StackNavigationProp<''>,
}


export default class MainTabPage extends BasePurePage<Props>
{
    render()
    {
        return (
            <Tab.Navigator
                initialRouteName = 'Tab_1'
                tabBar = { props =>
                {
                    return (
                        <MyTabBar
                            {...props}
                        />
                    )
                } }
                tabBarOptions = { {
                    activeBackgroundColor: 'red',
                    keyboardHidesTabBar: true,
                    
                } }
            >
                <Tab.Screen name="Tab_1" component={ Tab_1_Page }/>
                <Tab.Screen name="Tab_2" component={ Tab_2_Page }/>
                {/* <Tab.Screen name="Tab_3" component={ Tab__Page }/> */}
                <Tab.Screen name="Tab_4" component={ Tab_4_Page }/>
                {/* <Tab.Screen name="Tab_4" component={ Tab_1_Page } initialParams={{ stackNavigation: this.props.navigation }}/> */}
            </Tab.Navigator>
        )
    }

}






const tabIcons = [
    {
        iconName: null,
        icon: require('../../../assets/icons/bottomTab/tab_1_icon.png'),
        getTitleTextFunc: () => t().tab_1,
    },
    {
        iconName: null,
        icon: require('../../../assets/icons/bottomTab/tab_2_icon.png'),
        getTitleTextFunc: () => t().tab_2,
    },
    // {
    //     iconName: null,
    //     icon: require('../../../assets/icons/bottomTab/tab_3_icon.png'),
    //     getTitleTextFunc: () => t().tab_3,
    // },
    {
        iconName: null,
        icon: require('../../../assets/icons/bottomTab/tab_4_icon.png'),
        getTitleTextFunc: () => t().tab_4,
    },
    // require('../../../assets/images/tabIcons/tab_1_32x32.png'),
]


function MyTabBar({ state, descriptors, navigation })
{
    return (
        <View style={ styles.tabBarContainer }>
            <BlurView
                style = { styles.blurView }
                blurAmount = { 10 }
            />
            <View style={ styles.tabBarInnerContainer }>
                {
                    state.routes.map((route, index) => {
                
                        const isFocused = state.index === index
                
                        const onPress = () => {
                            const event = navigation.emit({
                                type: 'tabPress',
                                target: route.key,
                                canPreventDefault: true,
                            })
                
                            if (!isFocused && !event.defaultPrevented)
                            {
                                navigation.navigate(route.name);
                            }
                        }

                        return (
                            <TouchableOpacity
                                key = { index }
                                style = { styles.tabBarItem }
                                onPress = { onPress }
                                hitSlop = { {
                                    top: 15,
                                    bottom: 15,
                                } }
                            >
                                <Image
                                    style = { [ styles.tabIcon, isFocused && { tintColor: c().bottom_selected_tab_icon } ] }
                                    source = { tabIcons[index].icon }
                                    resizeMode = 'contain'
                                />
                                <Text
                                    style = { [ styles.tabTitleText, isFocused && { color: c().bottom_selected_tab_icon } ] }
                                >{ tabIcons[index].getTitleTextFunc() }</Text>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
            <SafeAreaView/>
        </View>
    )
}



const styles = StyleSheet.create({
    container: {

    },
    tabBarContainer: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        overflow: 'hidden',

        // backgroundColor: c().bottom_tab_background + '4d',
        backgroundColor: c().main_white + '4d',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
    },
    tabBarInnerContainer: {
        height: 50,
        flex: 1,
        flexDirection: 'row',
        // alignItems: Platform.OS == 'ios' ? 'flex-end' : 'center',
        alignItems: 'center',
    },
    tabBarItem: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    tabIcon: {
        height: 17,
        tintColor: c().bottom_tab_icon,
    },
    tabTitleText: {
        marginTop: 3,
        fontSize: 10,
        fontWeight: 'bold',
        color: c().bottom_tab_icon,
    },
    blurView: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
})
