import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';

import { Icon, Text } from 'react-native-magnus';
import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';

import MineScreen from '../mine/MineScreen';
import NoticeScreen from '../notice/NoticeScreen';
import OrderScreen from '../order/OrderScreen';

import { useTranslation } from 'react-i18next';

import { MainTabParamList } from '../types';

const MainTab = createBottomTabNavigator<MainTabParamList>();

export default function MainTabNavigator() {
  const colorScheme = useColorScheme();

  const { t } = useTranslation();

  return (
    <MainTab.Navigator
      initialRouteName="Order"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}
    >
      <MainTab.Screen
        name="Order"
        component={OrderScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon
              name="clipboard"
              fontFamily="Feather"
              fontSize="5xl"
              color={color}
            />
          ),
          tabBarLabel: ({ focused }) => (
            <Text fontSize="xs" color={focused ? 'yellow500' : 'black'}>
              {t('ding-dan')}
            </Text>
          ),
        }}
      />
      <MainTab.Screen
        name="Notice"
        component={NoticeScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon
              name="message-circle"
              fontSize="5xl"
              fontFamily="Feather"
              color={color}
            />
          ),
          tabBarLabel: ({ focused }) => (
            <Text fontSize="xs" color={focused ? 'yellow500' : 'black'}>
              {t('xiao-xi')}
            </Text>
          ),
        }}
      />
      <MainTab.Screen
        name="Mine"
        component={MineScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon
              name="user"
              fontSize="5xl"
              fontFamily="Feather"
              color={color}
            />
          ),
          tabBarLabel: ({ focused }) => (
            <Text fontSize="xs" color={focused ? 'yellow500' : 'black'}>
              {t('wo-de')}
            </Text>
          ),
        }}
      />
    </MainTab.Navigator>
  );
}