import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useTranslation } from 'react-i18next';
import HomeScreen from '../screens/Main/HomeScreen';
import OrderScreen from '../screens/Order/OrderScreen';
import UserScreen from '../screens/User/UserScreen';
import Icon from '../components/SvgIcon';
import Text from '../components/Text';

const BottomTab = createBottomTabNavigator();

export default function BottomTabNavigator() {
  const { t } = useTranslation();
  return (
    <BottomTab.Navigator initialRouteName="Home">
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              {t('wai-mai')}
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon
              fillAll={!!focused}
              type={focused ? 'primary' : 'info'}
              width={37}
              name="home"
            />
          ),
        }}
      />
      <BottomTab.Screen
        name="Order"
        component={OrderScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              {t('ding-dan')}
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon name={focused ? 'order1' : 'order2'} />
          ),
        }}
      />
      <BottomTab.Screen
        name="User"
        component={UserScreen}
        options={{
          title: ({ focused }) => (
            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
              {t('wo-de')}
            </Text>
          ),
          tabBarIcon: ({ focused }) => (
            <Icon
              type={focused ? 'primary' : 'info'}
              fillAll={!!focused}
              name="user"
            />
          ),
        }}
      />
    </BottomTab.Navigator>
  );
}