import * as React from 'react';
import { View, Image as RNImage, ImageStyle, ViewStyle } from 'react-native';

import { spacing } from '~/theme';

import { ImageProps } from './image.props';
import { imageStyles as styles } from './image.styles';

/**
 * Component to show images in multiple formats
 *
 * @param {ImageSourcePropType} source Image source
 * @param {number} size Image size
 * @param {boolean} circular True if the image is circular (optional)
 * @param {boolean} bordered True if the image is bordered (optional)
 * @param {ImageStyle} style Optional image style
 */
export function Image(props: ImageProps) {
  // grab the props
  const { source, bordered, circular, size, style: imageStyleOverride } = props;
  const innerSize = size - spacing[7];
  let wrapperStyle: ViewStyle = {
    ...styles.wrapper,
    width: size,
    height: size,
  };

  if (bordered) {
    wrapperStyle = {
      ...wrapperStyle,
      ...styles.borderedWrapper,
    };
  }

  if (circular) {
    wrapperStyle = {
      ...wrapperStyle,
      ...{
        borderRadius: size / 2,
      },
    };
  }

  const imageStyle: ImageStyle = {
    ...styles.image,
    ...imageStyleOverride,
    width: innerSize,
    height: innerSize,
  };

  return (
    <View style={wrapperStyle}>
      <RNImage source={source} style={imageStyle} />
    </View>
  );
}

Image.defaultProps = {
  bordered: false,
  circular: false,
};
