import React from 'react';
import {View, StyleProp, ViewStyle, ImageStyle} from 'react-native';
import Text, {TextVariant} from '@components/Text';
import {CustomImage} from '@components/Image/components/CustomImage';
import {Icon, IconTypes} from '@interfaces/icon';
import {checkIsIcon} from '@shared/utils';

import {styles} from './styles';
import {IconImageSize, IconImageSizeType, IconImageVariant} from './interfaces';

interface Props {
  icon: string | Icon;
  variant?: IconImageVariant;
  textVariant?: TextVariant;
  size?: IconImageSize;
  padding?: number;
  containerStyle?: StyleProp<ViewStyle>;
}

/**
 * @deprecated Use `_core/Image` component instead
 */
export function IconImage({
  icon,
  variant = 'leftIcon',
  textVariant = 'h1',
  size = 'md',
  padding = 10,
  containerStyle,
}: Props) {
  const isIcon = checkIsIcon(icon);
  const hasCustomIcon = !!(icon as Icon).custom;
  const iconImageSize = IconImageSizeType[size];
  const imageSize = iconImageSize - 2 * (hasCustomIcon ? 0 : padding);

  const viewStyles: ViewStyle = {
    height: iconImageSize,
    width: iconImageSize,
  };

  const imageStyles: ImageStyle = {
    height: imageSize,
    width: imageSize,
  };

  return (
    <View
      style={[
        viewStyles,
        styles.center,
        variant === 'leftIcon' && styles.leftIconContainer,
        containerStyle,
      ]}>
      {isIcon && icon.type === IconTypes.EMOJI ? (
        <Text variant={textVariant}>{icon.value}</Text>
      ) : (
        <CustomImage
          style={[
            imageStyles,
            hasCustomIcon &&
              (variant === 'circle'
                ? {borderRadius: imageSize}
                : styles.radiusLeft),
          ]}
          source={{uri: isIcon ? icon.value : icon}}
        />
      )}
    </View>
  );
}

export * from './interfaces';
