import React from 'react'
import { View, TouchableOpacity, StyleSheet, Text, Vibration } from 'react-native'
import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
import Animated, {
  FadeIn,
  FadeOut,
  LinearTransition,
} from 'react-native-reanimated'
import { useSelector } from 'react-redux'
import { useValues } from '../../utils/context'
import appColors from '../../theme/appColors'
import { windowHeight, windowWidth } from '../../theme/appConstant'
import Icons from '../../utils/icons/icons'
import appFonts from '../../theme/appFonts'

const AnimatedTouchable =
  Animated.createAnimatedComponent(TouchableOpacity)

const CustomNavBar: React.FC<BottomTabBarProps> = ({
  state,
  navigation,
}) => {
  const { rtl, isDark } = useValues()
  const { translateData } = useSelector((state: any) => state.setting)

  const labels: Record<string, string> = {
    Home: translateData?.home ?? 'Home',
    DashBoard: translateData?.dashboard ?? 'Dashboard',
    'My Ride': translateData?.myRide ?? 'My Ride',
    FleetDashBoard: 'Drivers',
    Settings: translateData?.settings ?? 'Settings',
  }

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: isDark
            ? appColors.primaryFont
            : appColors.white,
          borderColor: isDark
            ? appColors.primaryFont
            : appColors.border,
          flexDirection: rtl ? 'row-reverse' : 'row',
        },
      ]}
    >
      {state.routes.map((route, index) => {
        const focused = state.index === index

        return (
          <AnimatedTouchable
            key={route.key}
            layout={LinearTransition.springify().mass(0.5)}
            onPress={() => {
              if (!focused) {
                Vibration.vibrate(90)
                navigation.navigate(route.name)
              }
            }}

            style={[
              styles.tabItem,
              {
                backgroundColor: focused
                  ? appColors.primary
                  : 'transparent',
                flexDirection: rtl ? 'row-reverse' : 'row',

              },
            ]}
            activeOpacity={1}
          >
            {getIcon(route.name, focused)}

            {focused && (
              <Animated.Text
                entering={FadeIn.duration(200)}
                exiting={FadeOut.duration(200)}
                style={styles.label}
              >
                {labels[route.name]}
              </Animated.Text>
            )}
          </AnimatedTouchable>
        )
      })}
    </View>
  )
}



function getIcon(route: string, focused: boolean) {
  const color = focused ? appColors.black : appColors.tab

  switch (route) {
    case 'Home':
      return <Icons.Home color={color} />
    case 'DashBoard':
      return focused ? (
        <Icons.UnfillDashBoard />
      ) : (
        <Icons.DashBoard color={color} />
      )
    case 'My Ride':
      return <Icons.Car color={color} />
    case 'FleetDashBoard':
      return <Icons.DriverIcon color={color} />
    case 'Settings':
      return <Icons.Setting color={color} />
    default:
      return null
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: windowHeight(9),
    paddingHorizontal: windowWidth(4),
    paddingVertical: windowHeight(1.2),
    borderTopWidth: 1,
    justifyContent: 'space-between',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 6,
    elevation: 10,
    borderTopEndRadius: windowWidth(5),
    borderTopStartRadius: windowWidth(5),
    position: 'absolute',
    bottom: windowHeight(0),
    left: windowHeight(0),
    right: windowHeight(0),

  },
  tabItem: {
    height: windowHeight(5),
    paddingHorizontal: windowWidth(3),
    borderRadius: windowHeight(3),
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: windowHeight(0.5)
  },
  label: {
    marginLeft: windowWidth(2),
    color: appColors.black,
    fontFamily: appFonts.medium
  },
})

export default CustomNavBar
