import * as classNames from "classnames";
import * as React from "react";
import * as _ from "lodash";

import { Icon } from "./../Icon";

export interface IBadgeProps {
  className?: string;
  text?: string;
  icon?: any; // TODO: () => JSX.Element | IIconProps;
  iconRight?: boolean;
  onClick?: () => void;
}

export const Badge = ({
  text,
  icon,
  className,
  iconRight,
  onClick,
}: IBadgeProps) => ( 
  <span
    className={classNames("badge", {
      "badge-with-icon--only": _.isEmpty(text),
      "badge-with-icon": icon,
      "badge-with-icon--right": iconRight,
      "badge--wide": _.isString(text) && text.length > 2,
      [className]: className,
    })}
    {...onClick && { onClick }}
  >
    {(icon && !iconRight) && (
      <span className="badge__icon">
        {_.isFunction(icon) ? (
          <>
            {icon()}
          </>
        ) : (
          <Icon {...icon} />
        )}
      </span>
    )}

    <span className="badge__text">{text}</span>

    {(icon && iconRight) && (
      <span className="badge__icon">
        {_.isFunction(icon) ? (
          <>
            {icon()}
          </>
        ) : (
          <Icon {...icon} />
        )}
      </span>
    )}
  </span>
)