// External imports.
import * as React from 'react';
import { Image, StyleSheet } from 'react-native';

// Types imports.
import type { IconProps } from '../IconButton';

// Internal imports.
import styles from './Button.styles';
import ResponsiveDimensions from '../../utils/ResponsiveDimensions';

const Icon = React.memo((props: IconProps): null | React.ReactElement => {
  const { image, vector, iconName, size, color } = props;
  const _iconSize: number = size ?? ResponsiveDimensions.ms(24);

  const _iconStyle = StyleSheet.flatten([
    styles.icon,
    { width: _iconSize, height: _iconSize, tintColor: color },
  ]);

  if (image) {
    return <Image source={image} style={_iconStyle} resizeMode="contain" />;
  }

  if (vector) {
    try {
      const VectorImage = require('react-native-vector-image').default;

      return (
        <VectorImage source={vector} style={_iconStyle} resizeMode="contain" />
      );
    } catch (error) {
      console.warn('Error loading `react-native-vector-image`:', error);
      return null;
    }
  }

  if (iconName) {
    try {
      const MaterialDesignIcons =
        require('@react-native-vector-icons/material-design-icons').MaterialDesignIcons;

      return (
        <MaterialDesignIcons name={iconName} color={color} size={_iconSize} />
      );
    } catch (error) {
      console.warn(
        'Error loading `@react-native-vector-icons/material-design-icons`:',
        error
      );

      return null;
    }
  }

  return null;
});

export default Icon;