import React from "react";
import {
  Image as RNImage,
  ImageProps,
  Platform,
  StyleSheet,
  View,
} from "react-native";

import checkerboard from "../../images/checkerboard.svg";
import styledComponent from "../../utils/styledComponent";

type Props = ImageProps & {
  background?: boolean | string;
};

const Image = styledComponent<ImageProps>(RNImage);

const ImageComponent = ({ background, style, ...props }: Props) => {
  if (background && Platform.OS === "web") {
    const {
      height,
      width,
      margin,
      marginTop,
      marginBottom,
      marginLeft,
      marginRight,
      marginStart,
      marginEnd,
      marginHorizontal,
      marginVertical,
      ...rest
    } = StyleSheet.flatten(style) || {};
    return (
      <View
        style={{
          // @ts-ignore
          backgroundImage: `url(${
            typeof background === "string" ? background : checkerboard
          })`,
          height,
          width,
          margin,
          marginTop,
          marginBottom,
          marginLeft,
          marginRight,
          marginStart,
          marginEnd,
          marginHorizontal,
          marginVertical,
        }}
      >
        <Image style={{ height, width, ...rest }} {...props} />
      </View>
    );
  }
  return <Image style={style} {...props} />;
};

export default ImageComponent;