import React, {memo, useMemo} from 'react';
import {
  LayoutChangeEvent,
  TouchableOpacity,
  ViewStyle,
  Animated,
  StyleSheet,
} from 'react-native';
import RedBubble from '@components/RedBubble';
import Text from '@components/Text';
import {RNTabBarProps, TabBarVariantType} from '@components/TabView/interfaces';
import {COLORS} from '@shared/colors';

import {BADGE_SIZE, styles} from './styles';

interface Props {
  selected: boolean;
  label: string;
  onPress: () => void;
  badge?: number;
  variant?: TabBarVariantType;
  onLayout?: (event: LayoutChangeEvent) => void;
  style?: ViewStyle;
  activeColor?: string;
  index: number;
}

const getActiveOpacity = (
  position: Animated.AnimatedInterpolation<number>,
  routesLength: number,
  tabIndex: number,
) => {
  if (routesLength > 1) {
    const inputRange = Array.from({length: routesLength}, (_, i) => i);

    return position.interpolate({
      inputRange,
      outputRange: inputRange.map(i => (i === tabIndex ? 1 : 0)),
    });
  } else {
    return 1;
  }
};

const getInactiveOpacity = (
  position: Animated.AnimatedInterpolation<number>,
  routesLength: number,
  tabIndex: number,
) => {
  if (routesLength > 1) {
    const inputRange = Array.from({length: routesLength}, (_, i) => i);

    return position.interpolate({
      inputRange,
      outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),
    });
  } else {
    return 0;
  }
};

function TabBarItem({
  selected,
  badge,
  label,
  onPress,
  onLayout,
  style,
  variant = 'pills',
  activeColor = COLORS.PRIMARY,
  position,
  navigationState,
  index,
}: Props & RNTabBarProps) {
  const isPill = variant === 'pills';

  const activeOpacity = getActiveOpacity(
    position,
    navigationState.routes.length,
    index,
  );
  const inactiveOpacity = getInactiveOpacity(
    position,
    navigationState.routes.length,
    index,
  );

  const Badge = useMemo(
    () =>
      !!badge && (
        <RedBubble
          value={badge}
          size={BADGE_SIZE}
          fontSize={12}
          style={isPill ? styles.pillBadge : styles.tabBadge}
        />
      ),
    [badge, isPill],
  );
  return (
    <TouchableOpacity
      style={style}
      accessibilityRole="button"
      accessibilityState={{selected}}
      onPress={onPress}
      onLayout={onLayout}>
      <Animated.View
        style={[
          isPill ? styles.pillContainer : styles.tabContainer,
          {opacity: inactiveOpacity},
        ]}>
        <Text variant="subtitle1" style={styles.label}>
          {label}
        </Text>
        {Badge}
      </Animated.View>
      <Animated.View
        style={[
          {opacity: activeOpacity},
          isPill
            ? {...styles.pillContainer, ...styles.activePillContainer}
            : styles.tabContainer,
          StyleSheet.absoluteFill,
        ]}>
        <Text variant="subtitle1" style={[styles.label, {color: activeColor}]}>
          {label}
        </Text>
        {Badge}
      </Animated.View>
    </TouchableOpacity>
  );
}

export {TAB_BAR_ITEM_SIZE} from './styles';

export default memo(TabBarItem);
