import { View } from 'react-native';
import React, { useMemo } from 'react';
import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
import type { ReactElement, ReactNode } from 'react';
import { StyledCount, StyledCountText } from './StyledBadge';
import { DEFAULT_MAX_NUMBER } from './constants';

export interface CountProps extends ViewProps {
  /*
   * The Status Badge's content.
   */
  children: ReactNode;
  /**
   * Whether the Status Badge is visible.
   */
  visible?: boolean;
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * The content will be displayed in the badge.
   */
  content: number;
  /**
   * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
   */
  max?: number;
}

const Status = ({
  children,
  visible = true,
  style,
  max = DEFAULT_MAX_NUMBER,
  testID,
  content: originalContent,
  ...nativeProps
}: CountProps): ReactElement => {
  const content = useMemo(() => {
    return originalContent > max ? `${max}+` : String(originalContent);
  }, [originalContent, max]);

  return (
    <View {...nativeProps} style={style} testID={testID}>
      {children}
      {visible && (
        <StyledCount testID="count-badge">
          <StyledCountText>{content}</StyledCountText>
        </StyledCount>
      )}
    </View>
  );
};

export default Status;