import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { useSelector } from 'react-redux'

import { Home } from '../../screen/home'
import { MyRide, Settings } from '../../screen'
import { DashBoard } from '../../screen/dashBoard'
import { FleetDashBoard, FleetHome } from '../../screen/fleet'

import { useValues } from '../../utils/context'
import CustomNavBar from './CustomNavBar' // 👈 make sure path is correct

const Tab = createBottomTabNavigator()

export default function App() {
  const { translateData } = useSelector((state: any) => state.setting)
  const { rtl } = useValues()
  const { selfDriver } = useSelector((state: any) => state.account)

  const defaultTranslations = {
    home: 'Home',
    myRide: 'My Ride',
    settings: 'Settings',
    dashboard: 'Dashboard',
  }

  const t = translateData || defaultTranslations
  const type = selfDriver?.role

  const screens =
    type === 'driver'
      ? [
        {
          name: 'Home',
          component: Home,
          label: t.home,
        },
        {
          name: 'DashBoard',
          component: DashBoard,
          label: t.dashboard,
        },
        {
          name: 'My Ride',
          component: MyRide,
          label: t.myRide,
        },
        {
          name: 'Settings',
          component: Settings,
          label: t.settings,
        },
      ]
      : [
        {
          name: 'Home',
          component: FleetHome,
          label: t.home,
        },
        {
          name: 'DashBoard',
          component: DashBoard,
          label: t.dashboard,
        },
        {
          name: 'FleetDashBoard',
          component: FleetDashBoard,
          label: 'Drivers',
        },
        {
          name: 'Settings',
          component: Settings,
          label: t.settings,
        },
      ]

  const orderedScreens = rtl ? screens : screens




  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
      tabBar={(props) => <CustomNavBar {...props} />}
    >
      {orderedScreens.map(({ name, component }) => (
        <Tab.Screen
          key={name}
          name={name}
          component={component}
        />
      ))}
    </Tab.Navigator>
  )
}
