// Image component custom
// it wraps the Image component from react-native and adds some custom styles
// props:
// source: object
// style: object
// resizeMode: string

import React from 'react'
import { Image as RNImage, StyleSheet } from 'react-native'
import { WIDTH, HEIGHT } from '../utils'
const Image = ({
  source,
  legacySource,
  style,
  resizeMode = 'cover',
  width = 100,
  height = 20,
  shape = 'rectangle', // circle, rounded, rectangle, square

  m,
  mt,
  mr,
  mb,
  ml,
  mx,
  my,
  p,
  pt,
  pr,
  pb,
  pl,
  px,
  py,

  ...props
}) => {
  const calculateWidth = WIDTH * (width / 100)
  const calculateHeight = HEIGHT * (height / 100)
  const customStyle = {
    width: calculateWidth || `${width}%`,
    height: calculateHeight || `${height}%`,
    borderRadius:
      shape === 'circle' ? calculateWidth / 2 : shape === 'rounded' ? 10 : 0,
  }

  const customMargin = {
    margin: m,
    marginTop: mt,
    marginRight: mr,
    marginBottom: mb,
    marginLeft: ml,
    marginVertical: my,
    marginHorizontal: mx,
  }
  const customPadding = {
    padding: p,
    paddingTop: pt,
    paddingRight: pr,
    paddingBottom: pb,
    paddingLeft: pl,
    paddingVertical: py,
    paddingHorizontal: px,
  }

  return (
    <RNImage
      source={legacySource ? legacySource : { uri: source }}
      style={{
        ...styles.image,
        ...customStyle,
        ...customMargin,
        ...customPadding,
        ...style,
      }}
      resizeMode={resizeMode}
      {...props}
    />
  )
}

export default Image

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: '100%',
  },
})