/* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
import React from "react";
import {
  Image as NativeImage,
  ImageProps,
  StyleSheet,
  ImageSourcePropType,
  DimensionValue,
  StyleProp,
  ViewStyle,
} from "react-native";
import Config from "./Config";

import AspectRatio from "./AspectRatio";

type ImageStyleProp = {
  width?: number;
  height?: number;
  aspectRatio?: number;
};

const generateDimensions = ({
  aspectRatio,
  width,
  height,
}: ImageStyleProp): {
  aspectRatio?: number;
  width?: DimensionValue;
  height?: DimensionValue;
} => {
  if (aspectRatio && !width && !height) {
    return {
      aspectRatio,
      width: "100%",
    };
  }

  if (aspectRatio && height) {
    return {
      aspectRatio,
      height,
      width: aspectRatio * height,
    };
  }

  if (aspectRatio && width) {
    return {
      aspectRatio,
      width,
      height: width / aspectRatio,
    };
  }

  return { width, height };
};

const Image: React.FC<ImageProps> = ({
  source,
  resizeMode = "cover",
  style,
  ...props
}) => {
  const imageSource =
    source === null || source === undefined
      ? Config.placeholderImageURL
      : source;

  const styles = StyleSheet.flatten(style || {});
  const { aspectRatio, width, height } = generateDimensions(
    styles as ImageStyleProp
  );

  if (aspectRatio) {
    return (
      <AspectRatio
        style={[style, { width, height, aspectRatio }] as StyleProp<ViewStyle>}
      >
        <NativeImage
          {...props}
          source={imageSource as ImageSourcePropType}
          resizeMode={resizeMode}
          style={[
            style,
            {
              height: "100%",
              width: "100%",
            },
          ]}
        />
      </AspectRatio>
    );
  }

  return (
    <NativeImage
      {...props}
      source={source as ImageSourcePropType}
      resizeMode={resizeMode}
      style={style}
    />
  );
};

export default Image;