/* eslint-disable prettier/prettier */
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import * as React from 'react';

import HomeScreen from '../screens/home';
import OnLeave from '../screens/onleave';
import {APP_NAVIGATE_SCREEN} from '../utils/constant';

const {ON_LEAVE, OVERTIME, MAIN, CONFIRM_DATE} = APP_NAVIGATE_SCREEN;

const AppScreen = {
  [MAIN]: HomeScreen,
  [ON_LEAVE]: OnLeave,
  //   [OVERTIME]: Overtime,
  //   [CONFIRM_DATE]: ConfirmDate,
};
const Tab = createMaterialTopTabNavigator();

export default function TopTabNavigation() {
  return (
    <Tab.Navigator screenOptions={{scrollEnabled: true}}>
      {Object.keys(AppScreen).map((item, index) => (
        <Tab.Screen
          key={index}
          name={item}
          component={AppScreen[item]}
          options={{
            tabBarActiveTintColor: '#3947e9', // tab text color
            scrollEnabled: true,
            upperCaseLabel: false,
            tabBarLabelStyle: {
              fontSize: 9,
            },
            // tabBarIcon: ({ focused, size }) => (
            //     <Image source={AppIcon[item]} style={{ width: 24, height: 24 }} />
            // )
          }}
        />
      ))}
    </Tab.Navigator>
  );
}
