import classNames from 'classnames';
import Components from './iconList';
import './Icons.scss';

export interface IconProps {
  name: string;
  className?: string;
  height?: number;
  width?: number;
  color?: string;
  onClick?: (data?: any) => void;
  hoverEffect?: boolean;
  disabled?: boolean;
  hoverFill?: boolean;
}

const Icon = ({
  name,
  height,
  width,
  onClick = () => {},
  color = '#808080',
  hoverEffect = false,
  className = '',
  disabled = false,
  hoverFill = false,
  ...props
}: IconProps) => {
  const IconComponent = Components[name];

  const iconHeight = height ? height : 14;
  const imageHeight = height ? height + 'px' : 'auto';
  const iconWidth = width ? width : 14;
  const imageWidth = width ? width + 'px' : 'auto';

  if (!IconComponent) {
    return null;
  }

  if (typeof Components[name] === 'function') {
    return (
      <span
        onClick={disabled ? () => {} : onClick}
        style={{ height: `${iconHeight}px`, width: `${iconWidth}px` }}
        className={classNames('ff-icon-container', {
          'ff-icon-click': !!hoverEffect,
          'ff-icon-disabled': disabled,
          'ff-icon-hover-fill': !!hoverFill,
          [className]: !!className,
        })}
        {...props}
      >
        <IconComponent height="100%" width="100%" style={{ color: color }} />
      </span>
    );
  }

  if (typeof Components[name] === 'string') {
    return (
      <span onClick={onClick}>
        <img
          src={Components[name]}
          alt={name}
          height={imageHeight}
          width={imageWidth}
          className={classNames({ [className]: !!className })}
        />
      </span>
    );
  }
};

export default Icon;