import { type FC } from 'react';
import FastImage from '@d11/react-native-fast-image';
import { moderateScale } from 'react-native-size-matters';
import { defaultScale } from '../../utils/Common';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';

interface Prop {
  source?: object;
  sourceUri?: string;
  width: number | string | undefined;
  height: number | string | undefined;
  backgroundColor?: string;
  resizeMode?: any;
  marginTop?: number;
  marginRight?: number;
  marginBottom?: number;
  marginLeft?: number;
  cache?: any;
  borderRadius?: number;
  theme: Theme;
  onError?: () => void;
}

const defaultRadius = 0;
const defaultMargin = 0;

const TImage: FC<Prop> = ({
  source,
  sourceUri,
  width,
  height,
  backgroundColor,
  resizeMode,
  marginTop,
  marginRight,
  marginBottom,
  marginLeft,
  cache,
  borderRadius,
  onError,
}): any => {
  const { colors } = useTheme();
  return (
    <>
      {sourceUri && (
        <FastImage
          // @ts-ignore
          style={{
            width:
              typeof width === 'string'
                ? width
                : moderateScale(width || 0, defaultScale),
            height:
              typeof height === 'string'
                ? height
                : moderateScale(height || 0, defaultScale),
            backgroundColor: backgroundColor || colors.transparent,
            marginTop: moderateScale(marginTop || defaultMargin, defaultScale),
            marginRight: moderateScale(
              marginRight || defaultMargin,
              defaultScale
            ),
            marginBottom: moderateScale(
              marginBottom || defaultMargin,
              defaultScale
            ),
            marginLeft: moderateScale(
              marginLeft || defaultMargin,
              defaultScale
            ),
            borderRadius: borderRadius || defaultRadius / 2,
          }}
          source={{
            uri: sourceUri,
            priority: FastImage.priority.normal,
            cache: cache,
          }}
          resizeMode={resizeMode}
          onError={onError}
        />
      )}
      {source && (
        <FastImage
          source={source}
          // @ts-ignore
          style={{
            width:
              typeof width === 'string'
                ? width
                : moderateScale(width || 0, defaultScale),
            height:
              typeof height === 'string'
                ? height
                : moderateScale(height || 0, defaultScale),
            backgroundColor: backgroundColor || colors.transparent,
            marginTop: moderateScale(marginTop || defaultMargin, defaultScale),
            marginRight: moderateScale(
              marginRight || defaultMargin,
              defaultScale
            ),
            marginBottom: moderateScale(
              marginBottom || defaultMargin,
              defaultScale
            ),
            marginLeft: moderateScale(
              marginLeft || defaultMargin,
              defaultScale
            ),
            borderRadius: borderRadius || defaultRadius / 2,
          }}
          resizeMode={resizeMode}
        />
      )}
    </>
  );
};

export default withTheme(TImage);