import * as React from 'react'
import {NavigationContainer} from '@react-navigation/native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import Birthday from './crossplatform/Birthday/view/Birthday'
import BirthdayDetail from './crossplatform/Birthday/view/BirthdayDetail'
import {
    BirthdayAddName,
    BirthdayDetailName,
    BirthdayEditName,
    BirthdayName,
    BirthdaySettingsName,
    RootStackParamList,
    RootTabParamList,
    TabNavName,
} from './crossplatform/Common/define/Defines'
import BirthdaySettings from './crossplatform/Birthday/view/BirthdaySettings'
import {Image, StyleSheet} from 'react-native'
import BirthdayAdd from './crossplatform/Birthday/view/BirthdayAdd'
import BirthdayEdit from './crossplatform/Birthday/view/BirthdayEdit'

//tabs
const Tab = createBottomTabNavigator<RootTabParamList>()
function TabNav() {
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({color}) => {
                    return TabNavBarIcon(route.name, color)
                },
                tabBarActiveTintColor: '#FFB3DB',
                tabBarInactiveTintColor: 'gray',
            })}>
            <Tab.Screen name={BirthdayName} component={Birthday} options={{title: '三火生日本'}} />
            <Tab.Screen name={BirthdaySettingsName} component={BirthdaySettings} options={{title: '设置'}} />
        </Tab.Navigator>
    )
}

function TabNavBarIcon(name: string, color: string) {
    if (name === BirthdayName) {
        return (
            <Image
                source={require('./crossplatform/Common/img/homepage.png')}
                style={[styles.tabIcon, {tintColor: color}]}
            />
        )
    } else if (name === BirthdaySettingsName) {
        return (
            <Image
                source={require('./crossplatform/Common/img/mine.png')}
                style={[styles.tabIcon, {tintColor: color}]}
            />
        )
    }
    return null
}

//------------screens--------------end
const Stack = createNativeStackNavigator<RootStackParamList>()

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName={TabNavName}>
                <Stack.Screen name={TabNavName} component={TabNav} options={{title: '返回', headerShown: false}} />
                <Stack.Screen name={BirthdayDetailName} component={BirthdayDetail} />
                <Stack.Screen name={BirthdayAddName} component={BirthdayAdd} />
                <Stack.Screen name={BirthdayEditName} component={BirthdayEdit} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

const styles = StyleSheet.create({
    tabIcon: {
        width: 25,
        height: 25,
        resizeMode: 'contain',
    },
})
export default App