import { EmojiType, IEmojiIcon } from '@vev/utils';
import { isString } from 'lodash';
import React from 'react';
import { BoxProps, BoxSize, SilkeBox } from '../silke-box';
import { SilkeIcon, SilkeIcons } from '../silke-icon';
import { SilkeShape } from '../silke-icon/silke-shape';
import styles from './silke-image.scss';

export type SilkeImageProps = {
  src?: string;
  icon?: IEmojiIcon | SilkeIcons;
  alt?: string;
  avatar?: BoxSize | true;
  bgColor?: string;
} & BoxProps;

export function SilkeImage({
  src,
  alt,
  avatar,
  icon,
  draggable,
  bgColor,
  ...rest
}: SilkeImageProps) {
  if (avatar) {
    rest.className = styles.avatar + ' ' + (rest.className || '');
    if (avatar === true) avatar = 'base';
    rest.width = avatar;
    rest.height = avatar;
    delete rest.aspectRatio;
  }

  if (bgColor) {
    rest.style = { ...rest.style, backgroundColor: bgColor };
  }

  if (icon) {
    if (isString(icon)) {
      return (
        <SilkeBox {...rest} align="center">
          <SilkeIcon icon={icon} />
        </SilkeBox>
      );
    }
    switch (icon.type) {
      case EmojiType.emoji:
        return (
          <SilkeBox {...rest} align="center">
            <span className={styles.emoji}>{icon.value}</span>
          </SilkeBox>
        );
      case EmojiType.icon:
        return (
          <SilkeBox {...rest} align="center">
            <SilkeShape shape={icon.value} />
          </SilkeBox>
        );
      case EmojiType.upload:
        src = icon.value.url;
        break;
    }
  }
  return (
    <SilkeBox {...rest}>
      {src && <img className={styles.img} src={src} alt={alt} draggable={draggable} />}
    </SilkeBox>
  );
}