import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
import { CommonActions } from '@react-navigation/native'
import React from 'react'
import { BottomNavigation } from 'react-native-paper'

const TabBar = (props: BottomTabBarProps) => (
  <BottomNavigation.Bar
    shifting
    navigationState={props.state}
    safeAreaInsets={props.insets}
    onTabPress={({ route, preventDefault }) => {
      const event = props.navigation.emit({
        type: 'tabPress',
        target: route.key,
        canPreventDefault: true,
      })

      if (event.defaultPrevented) {
        preventDefault()
      } else {
        props.navigation.dispatch({
          ...CommonActions.navigate(route.name, route.params),
          target: props.state.key,
        })
      }
    }}
    renderIcon={({ route, focused, color }) => {
      const { options } = props.descriptors[route.key]
      if (options.tabBarIcon) {
        return options.tabBarIcon({ focused, color, size: 24 })
      }

      return null
    }}
    getLabelText={({ route }) => {
      const { options } = props.descriptors[route.key]
      const label =
        options.tabBarLabel !== undefined
          ? options.tabBarLabel.toString()
          : options.title !== undefined
            ? options.title
            : route.name

      return label
    }}
  />
)

export default TabBar