import React, { useContext } from 'react';
import { TouchableOpacity, StyleSheet } from 'react-native';
import {
  BottomTabBarButtonProps,
  BottomTabNavigationOptions,
} from '@react-navigation/bottom-tabs';
import { Route } from '@react-navigation/native';
import { TabBarIcon } from './TabBarIcon';
import { Text } from '../../Text';
import { MiniAppContext } from '../../Context';
import { Colors } from '../../Consts';

type LabelType = NonNullable<BottomTabNavigationOptions['tabBarLabel']>;

interface CustomBottomTabItemProps {
  route: Route<string>;
  focused: boolean;
  label: LabelType;
  onPress: () => void;
  onLongPress: () => void;
  activeTintColor: string;
  inactiveTintColor: string;
  activeBackgroundColor?: string;
  inactiveBackgroundColor?: string;
  icon: any;
  badge?: string | number;
  showLabel?: boolean;
  labelStyle?: any;
  iconStyle?: any;
  style?: any;
  badgeStyle?: any;
  allowFontScaling?: boolean;
  button?: (props: BottomTabBarButtonProps) => React.ReactNode;
  /**
   * The accessibility label for the tab.
   */
  accessibilityLabel?: string;
  /**
   * An unique ID for testing for the tab.
   */
  testID?: string;
}

const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
  route,
  focused,
  label,
  onPress,
  onLongPress,
  activeTintColor,
  inactiveTintColor,
  activeBackgroundColor,
  inactiveBackgroundColor,
  icon,
  badge,
  showLabel,
  labelStyle,
  iconStyle,
  style,
  badgeStyle,
  allowFontScaling,
}) => {
  const context = useContext<any>(MiniAppContext);
  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  const renderIcon = () => {
    if (icon === undefined) {
      return null;
    }

    const activeOpacity = focused ? 1 : 0;
    const inactiveOpacity = focused ? 0 : 1;

    return (
      <TabBarIcon
        route={route}
        badge={badge}
        badgeStyle={badgeStyle}
        activeOpacity={activeOpacity}
        allowFontScaling={allowFontScaling}
        inactiveOpacity={inactiveOpacity}
        activeTintColor={activeTintColor}
        inactiveTintColor={inactiveTintColor}
        renderIcon={icon}
        style={iconStyle}
      />
    );
  };

  const renderLabel = ({ focused }: { focused: boolean }) => {
    if (showLabel === false) {
      return null;
    }

    const color = focused ? activeTintColor : inactiveTintColor;

    if (typeof label === 'string') {
      return (
        <Text
          numberOfLines={1}
          style={[styles.label, labelStyle]}
          color={focused ? activeTintColor : inactiveTintColor}
          typography={focused ? 'label_xs_medium' : 'description_xs_regular'}
          allowFontScaling={allowFontScaling}
        >
          {label}
        </Text>
      );
    }

    return label({
      focused,
      color,
      children: route.name,
      position: 'below-icon',
    });
  };

  return (
    <TouchableOpacity
      onPress={onPress}
      onLongPress={onLongPress}
      style={[
        styles.container,
        {
          backgroundColor: focused
            ? activeBackgroundColor
            : inactiveBackgroundColor,
        },
        style,
        showBaseLineDebug && styles.debugBaseLine,
      ]}
    >
      {renderIcon()}
      {renderLabel({ focused })}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 8,
    bottom: -2,
  },
  label: {
    fontSize: 12,
    fontWeight: '600',
  },
  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
});

export default CustomBottomTabItem;