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

import { Loading, LoadingType } from "./../Loading";
import { Icon, IIconProps } from "./../Icon";
import { initCopy } from "../../utilities/social";

export enum ButtonType {
  Primary = "primary",
  Secondary = "secondary",
  Faded = "faded",
  Light = "light",
}

export enum ButtonSize {
  Large = "large",
  Small = "small",
}

export interface IButtonProps {
  type?: ButtonType;
  size?: ButtonSize;
  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
  text?: string;
  subtext?: string;
  subtextTop?: boolean;
  icon?: IIconProps | Function;
  iconRight?: boolean;
  iconLeft?: boolean;
  iconTop?: boolean;
  iconInlineText?: boolean;
  center?: boolean;
  alignLeft?: boolean;
  alignCenter?: boolean;
  innerRef?: React.RefObject<HTMLButtonElement>;
  style?: object;
  capitalize?: boolean;
  className?: string;
  loading?: boolean;
  // For <Button> elements in <Form>
  htmlType?: string;
  children?: any;
  copyOnClick?: () => string;
}

export class Button extends React.Component<IButtonProps, {}> {
  public ref: React.RefObject<HTMLButtonElement>;

  constructor(props: IButtonProps) {
    super(props);

    this.ref = React.createRef();
  }

  public componentDidMount() {
    initCopy(this.ref.current, () => this.props.copyOnClick && this.props.copyOnClick());
  }

  public render() {
    const {
      type = ButtonType.Primary,
      children,
      size,
      onClick,
      htmlType,
      className,
      text,
      subtext,
      subtextTop,
      icon,
      iconRight,
      iconLeft,
      iconTop,
      iconInlineText,
      center,
      innerRef,
      capitalize,
      loading,
      alignLeft,
      alignCenter,
      style = {}
    } = this.props;
    // @ts-ignore
    return <button
      onClick={onClick}
      className={classNames("btn", {
        [`btn--${size}`]: size,
        [`btn--${type}`]: type,
        "btn--with-icon": icon,
        "btn--with-icon--only": icon && !text && !subtext,
        "btn--with-icon-right": icon && iconRight,
        "btn--with-icon-left": icon && iconLeft,
        "btn--with-icon-top": icon && iconTop,
        "btn--with-icon-inline": icon && iconInlineText,
        "btn--capitalize": capitalize,
        "btn--no-capitalize": capitalize === false,
        // TODO: !_.isString()
        "btn--no-subtext": !subtext,
        "btn--center": center,
        "btn--with-loader": loading,
        "btn--align-left": alignLeft,
        "btn--align-center": alignCenter,
        [className]: className,
      })}
      {...innerRef && { ref: innerRef }}
      {...htmlType && { type: htmlType }}
      {...style && { style }}
      ref={this.ref}
    >
    <span className="btn__main-wrapper">
      {loading ? (
        <span className="btn__loading">
          <Loading type={LoadingType.Spinner} />
        </span>
      ) : (
        <>
          {icon && (iconLeft || iconTop) && (
            <div className="btn__icon">
              {_.isFunction(icon) ? icon() : <Icon {...icon as IIconProps} />}
            </div>
          )}

          <span className="btn__text-wrapper">
            {subtext && subtextTop && <span className={classNames(["btn__subtext", "btn__subtext--top"])}>{subtext}</span>}

            <span className="btn__text">
              {icon && iconInlineText && (
                <div className="btn__icon">
                  {_.isFunction(icon) ? icon() : <Icon {...icon as IIconProps} />}
                </div>
              )}

              {text}
            </span>

            {subtext && !subtextTop && <span className="btn__subtext">{subtext}</span>}
          </span>

          {icon && iconRight && (
            <div className="btn__icon">
              {_.isFunction(icon) ? icon() : <Icon {...icon as IIconProps} />}
            </div>
          )}
        </>
      )}
    </span>
      {children && children}
    </button>;
  }
};