import type { ReactElement } from 'react';
import React from 'react';
import { Image as RNImage } from 'react-native';
import type { ImageProps as RNImageProps } from 'react-native';
import { useTheme } from '../../theme';
import { useDeprecation } from '../../utils/hooks';

export interface ImageProps extends RNImageProps {
  /**
   * Whether the image is rounded.
   */
  rounded?: boolean;
  /**
   * Image sizes, following the same sizes as the `sizes` global theme.
   */
  size?: '6xlarge' | '15xlarge';
  /**
   * Testing id of the component.
   */
  testID?: string;
}

/**
 * @deprecated Image component will soon be deprecated. Please use `Image` from `react-native` instead.
 */
const Image = ({
  rounded = false,
  size = '6xlarge',
  testID,
  style,
  ...imageNativeProps
}: ImageProps): ReactElement => {
  useDeprecation(
    'Image component will soon be deprecated. Please use `Image` from `react-native` instead.'
  );

  const theme = useTheme();
  const imageSize = theme.__hd__.image.sizes[size];
  return (
    <RNImage
      testID={testID}
      style={[
        {
          width: imageSize,
          height: imageSize,
          borderRadius: rounded ? imageSize / 2 : 0,
        },
        style,
      ]}
      {...imageNativeProps}
    />
  );
};

export default Image;