import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';

import { Exercise } from '@screens/Exercise';
import { History } from '@screens/History';
import { Home } from '@screens/Home';
import { Profile } from '@screens/Profile';

import HistoryIcon from '@assets/history.svg';
import HomeIcon from '@assets/home.svg';
import ProfileIcon from '@assets/profile.svg';

import { gluestackUIConfig } from '../../config/gluestack-ui.config';
import { Platform } from 'react-native';

type AppRoutes = {
  Home: undefined,
  Exercise: undefined,
  History: undefined,
  Profile: undefined,
}

export type AppNavigatorRoutesProps = BottomTabNavigationProp<AppRoutes>;

const { Navigator, Screen } = createBottomTabNavigator<AppRoutes>();

export function AppRoutes() {
  const { tokens: { space, colors } } = gluestackUIConfig;
  const iconSize = space['6'];

  return (
    <Navigator screenOptions={{
      headerShown: false,
      tabBarShowLabel: false,
      tabBarActiveTintColor: colors.green500,
      tabBarInactiveTintColor: colors.gray200,
      tabBarStyle: {
        backgroundColor: colors.gray600,
        borderTopWidth: 0,
        height: Platform.OS === 'android' ? 'auto' : 96,
        paddingBottom: space['10'],
        paddingTop: space['6'],
      }
    }}>
      <Screen
        name="Home"
        component={Home}
        options={{
          tabBarIcon: ({ color }) => <HomeIcon fill={color} width={iconSize} height={iconSize}/>
        }}
      />

      <Screen
        name="History"
        component={History}
        options={{
          tabBarIcon: ({ color }) => <HistoryIcon fill={color} width={iconSize} height={iconSize}/>
       }}
      />

      <Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarIcon: ({ color }) => <ProfileIcon fill={color} width={iconSize} height={iconSize}/> 
        }}
      />

      <Screen
        name="Exercise"
        component={Exercise}
        options={{ tabBarButton: () => null }}
      />
    </Navigator>
  )
}
