import React, {memo} from 'react';
import {
  LayoutChangeEvent,
  LayoutRectangle,
  StyleProp,
  ViewStyle,
  View,
} from 'react-native';
import {Pressable} from '@components/_core/Pressable';
import {Typography} from '@components/_core/Typography';
import {Badge} from '@components/_HuGo/Badge';
import {TABS_TRANSPARENT_COLOR} from '@components/_HuGo/Tabs/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  label: string;
  badge?: boolean;
  onPress: () => void;
  onLayout?: (width: LayoutRectangle) => void;
  selected?: boolean;
  style?: StyleProp<ViewStyle>;
}

function TabComponent({
  label,
  badge,
  onPress,
  onLayout,
  selected,
  style,
}: Props) {
  const {theme} = useTheme();

  const onComponentLayout = ({nativeEvent}: LayoutChangeEvent) =>
    onLayout?.(nativeEvent.layout);

  return (
    <Pressable
      backgroundColor={TABS_TRANSPARENT_COLOR}
      onPress={onPress}
      style={[styles.container, style]}
      onLayout={onComponentLayout}>
      <View style={styles.badgeContainer} />
      <Typography
        variant="xs"
        color={selected ? theme.text.neutral.brand : theme.text.neutral.default}
        weight="semiBold"
        numberOfLines={1}
        ellipsizeMode="tail">
        {label}
      </Typography>
      <View style={styles.badgeContainer}>
        <Badge show={badge} />
      </View>
    </Pressable>
  );
}

export const Tab = memo(TabComponent);
