import React from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import type { IconName } from '../Icon';
import { renderSuffix } from './utils';
import { StyledBadge, StyledSuffixContainer } from './StyledSearch';
import type { BadgeProps } from '../Badge';

interface SearchSuffixIconProps {
  /**
   * Name of Icon or ReactElement to render on the right side of the input.
   */
  suffix?: IconName | React.ReactElement;
  /**
   * Additional wrapper style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Badge props to be render on the suffix.
   */
  badge?: Omit<BadgeProps, 'size'>;
}

const renderBadge = (props: Omit<BadgeProps, 'size'>) => {
  const { content, icon, ...rest } = props;
  if (content)
    return (
      <StyledBadge intent="primary" content={content} size="small" {...rest} />
    );
  if (icon)
    return <StyledBadge intent="primary" icon={icon} size="small" {...rest} />;
  return null;
};

const SearchSuffixIcon = (props: SearchSuffixIconProps) => {
  const { suffix, testID, style, badge } = props;
  return (
    <StyledSuffixContainer testID={testID} style={style}>
      {!!badge && renderBadge(badge)}
      {renderSuffix({ suffix })}
    </StyledSuffixContainer>
  );
};

export default SearchSuffixIcon;