import * as React from "react";
import { Text } from "@ui-kitten/components";
import { useModel } from "flooks";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TabBarIcon from "../components/TabBarIcon";
import OrderScreen from "../screens/OrderScreen";
import HomeScreen from "../screens/HomeScreen";
import UserScreen from "../screens/UserScreen";

const BottomTab = createBottomTabNavigator();

export default function BottomTabNavigator() {
    const { tab1, tab2, tab3 } = useModel("wordsModel");
    return (
      <BottomTab.Navigator
        headerMode='none'
        initialRouteName='Home'
        removeClippedSubviews
        lazy
        backBehavior='initialRoute'
        unmountOnBlur
      >
        <BottomTab.Screen
          tabBarTestID='home'
          name='Home'
          component={HomeScreen}
          options={{
                    tabBarLabel: ({ focused }) => (
                      <Text
                        category='c1'
                        status={focused ? "primary" : "info"}
                      >
                        {tab1}
                      </Text>
                    ),
                    tabBarIcon: ({ focused }) => (
                      <TabBarIcon focused={focused} name='home' />
                    ),
                }}
        />
        <BottomTab.Screen
          tabBarTestID='order'
          name='Order'
          component={OrderScreen}
          options={{
                    tabBarLabel: ({ focused }) => (
                      <Text
                        category='c1'
                        status={focused ? "primary" : "info"}
                      >
                        {tab2}
                      </Text>
                    ),
                    tabBarIcon: ({ focused }) => (
                      <TabBarIcon focused={focused} name='file-text' />
                    ),
                }}
        />

        <BottomTab.Screen
          tabBarTestID='user'
          name='User'
          component={UserScreen}
          options={{
                    tabBarLabel: ({ focused }) => (
                      <Text
                        category='c1'
                        status={focused ? "primary" : "info"}
                      >
                        {tab3}
                      </Text>
                    ),
                    tabBarIcon: ({ focused }) => (
                      <TabBarIcon focused={focused} name='person' />
                    ),
                }}
        />
      </BottomTab.Navigator>
    );
}