import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import * as React from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {Text, View, Image} from 'react-native';
import ShiftScreen from '../screens/shift/ShiftContainer';
import ProfileScreen from '../screens/profile/ProfileContainer';
import NotificationScreen from '../screens/notification/NotificationContainer';
import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import HeaderComponent from '../components/header/HeaderComponent';
import {IMAGES, IconDrawer} from '../values/images';
import TopTabNavigation from './TopTabNavigation';
import DayWageNavigation from './DayWageTopTabNavigation';
const {HOME, SHIFT, PROFILE, DAY_WAGE, Notification} = APP_NAVIGATE_SCREEN;

const AppScreen = {
  [HOME]: TopTabNavigation,
  [Notification]: NotificationScreen,
  [DAY_WAGE]: DayWageNavigation,
  //[SHIFT]: DayWageNavigation,
  [PROFILE]: ProfileScreen,
};
const AppIcon = {
  [HOME]: IconDrawer.IcOverview,
  [Notification]: IconDrawer.IcNotificationColor,
  [DAY_WAGE]: IconDrawer.IcDataSheet,
  //[SHIFT]: IconDrawer.IcDataSheet,
  [PROFILE]: IconDrawer.IcLeave,
};

const Tab = createBottomTabNavigator();

export default function BottomNavigation() {
  const userDetails = useSelector(state => state.UserInfo.userInfo);
  return (
    <Tab.Navigator screenOptions={{scrollEnabled: true}}>
      {Object.keys(AppScreen).map((item, index) => (
        <Tab.Screen
          key={index}
          name={item}
          component={AppScreen[item]}
          options={{
            header: props => <HeaderComponent {...props} />,
            tabBarActiveTintColor: '#3947e9', // tab text color
            tabBarLabelPosition: 'below-icon',
            tabBarShowLabel: true,

            tabBarIcon: ({focused, size}) =>
              index === 3 ? (
                <Image
                  source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: 30,
                    borderWidth: 1,
                    borderColor: focused ? 'blue' : 'grey',
                    resizeMode: 'contain',
                  }}
                />
              ) : (
                <Image source={AppIcon[item]} style={{width: 24, height: 24}} />
              ),
          }}
        />
      ))}
    </Tab.Navigator>
  );
}
