import React, { FC, useContext } from 'react';
import { View, StyleSheet } from 'react-native';

import { useComponentId } from '../Application';
import { ApplicationContext, MiniAppContext } from '../Context';
import { BadgeProps } from './types';
import { Colors, Radius, Spacing } from '../Consts';
import { Text, useScaleSize } from '../Text';

const Badge: FC<BadgeProps> = ({
  label = '',
  style,
  backgroundColor,
  accessibilityLabel,
}) => {
  const { theme } = useContext(ApplicationContext);
  const context = useContext<any>(MiniAppContext);
  const { componentId } = useComponentId('Badge', accessibilityLabel);
  const scaledSize = useScaleSize(16);

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
  
  const styles = StyleSheet.create({
    badge: {
      paddingHorizontal: Spacing.XS,
      borderRadius: Radius.M,
      justifyContent: 'center',
      alignItems: 'center',
      height: scaledSize - 2,
      minWidth: scaledSize - 2,
      flexDirection: 'row',
      alignSelf: 'baseline',
    },
    badgeContainer: {
      borderRadius: Radius.M,
      justifyContent: 'center',
      alignItems: 'center',
      height: scaledSize,
      minWidth: scaledSize,
      flexDirection: 'row',
      borderWidth: 1,
      borderColor: Colors.black_01,
      backgroundColor: 'transparent',
      alignSelf: 'baseline',
    },
    debugBaseLine: {
      borderWidth: 1,
      borderColor: Colors.green_06,
    },
  });

  const isValidatedColor = () => {
    const colorKeys = Object.keys(Colors);
    const colorValue = Object.values(Colors);
    if (backgroundColor) {
      const colorIndex = colorValue.indexOf(backgroundColor);
      if (colorIndex !== -1) {
        if (colorKeys[colorIndex]?.includes('_03')) {
          return true;
        }
      }
    }
    return false;
  };

  const isNumber = () => {
    const numberRegex = /^\d+$/;
    return numberRegex.test(String(label));
  };

  const formatTitle = () => {
    if (isNumber() && Number(label) > 99) {
      return '99+';
    }
    return label.toString();
  };

  let badgeColor = isNumber()
    ? theme.colors.error.primary
    : theme.colors.warning.primary;

  if (backgroundColor && isValidatedColor()) {
    badgeColor = backgroundColor;
  }

  return (
    <View style={[style, styles.badgeContainer, showBaseLineDebug && styles.debugBaseLine]}>
      <View
        style={[styles.badge, { backgroundColor: badgeColor }]}
        accessibilityLabel={componentId}
      >
        <Text
          color={Colors.black_01}
          typography={'action_xxs_bold'}
          accessibilityLabel={`${componentId}|text`}
        >
          {formatTitle()}
        </Text>
      </View>
    </View>
  );
};

export default Badge;