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

import { Loading, LoadingType, ILoadingProps } from "../Loading";
import { Button, ButtonSize, IButtonProps } from "../Button";

export enum CalloutType {
  Boxed = "boxed",
  Faded = "faded",
}

export interface ICalloutProps {
  type: CalloutType;
  text: string;
  subtext?: string;
  button?: IButtonProps;
  // TODO: This is a <Sprite> component
  icon?: any;
  iconRight?: boolean;
  innerRef?: React.RefObject<any>;
  className?: string;
  loading?: Partial<ILoadingProps> | boolean;
  onClick?: () => void;
  style?: any;
}

export const Callout = ({
  text,
  subtext,
  button,
  icon,
  iconRight,
  type,
  innerRef,
  className,
  loading,
  onClick,
  style,
}: ICalloutProps) => (
  <div
    className={classNames("callout", {
      "callout--with-click": onClick,
      "callout--with-button": !_.isEmpty(button),
      "callout--with-icon": !_.isEmpty(icon),
      "callout--with-icon-right": iconRight,
      "callout--boxed": type === CalloutType.Boxed,
      "callout--faded": type === CalloutType.Faded,
      [className]: _.isString(className),
    })}
    {...innerRef && { ref: innerRef }}
    {...onClick && { onClick }}
    {...style && { style }}
  >
    {(icon && !iconRight) && (
      <div className="callout__icon">
        {icon}
      </div>
    )}

    {(text || subtext) && (
      <span className="callout__text"> 
        {text}

        <span className="callout__subtext"> 
          {subtext}
        </span>
      </span>
    )}

    {button && (
      <div className="callout__btn">
        <Button {...Object.assign({}, {
          size: ButtonSize.Small,
        } as IButtonProps, button)} />
      </div>
    )}

    {loading && (
      <div className="callout__loading">
        <Loading
          type={LoadingType.Spinner}
          {..._.isObject(loading) && { ...loading }}
        />
      </div>
    )}

    {(icon && iconRight) && (
      <div className="callout__icon">
        {icon}
      </div>
    )}
  </div>
);