// @themable Button
import * as React from 'react';
import styled from 'styled-components';
export var ButtonVariant;
(function (ButtonVariant) {
    ButtonVariant[ButtonVariant["Primary"] = 0] = "Primary";
    ButtonVariant[ButtonVariant["Secondary"] = 1] = "Secondary";
    ButtonVariant[ButtonVariant["Success"] = 2] = "Success";
    ButtonVariant[ButtonVariant["Info"] = 3] = "Info";
    ButtonVariant[ButtonVariant["Warning"] = 4] = "Warning";
    ButtonVariant[ButtonVariant["Danger"] = 5] = "Danger";
    ButtonVariant[ButtonVariant["Link"] = 6] = "Link";
    ButtonVariant[ButtonVariant["InlineLink"] = 7] = "InlineLink";
})(ButtonVariant || (ButtonVariant = {}));
const defaultLink = ({ to, replace, ...props }) => {
    return <a {...props} href={to}/>;
};
let renderLink = defaultLink;
export function setLinkRenderer(renderer) {
    renderLink = renderer;
}
/**
 * Abstract button functionality so that the styling is only needed once
 * for links and buttons. Use this for buttons in navbars and other complex
 * components where you don't want the applicaiton's typical "button" style
 */
export class AbstractButton extends React.Component {
    constructor() {
        super(...arguments);
        this._onMouseUp = (e) => {
            e.currentTarget.blur();
            if (this.props.onMouseDown) {
                this.props.onMouseDown(e);
            }
        };
    }
    render() {
        const props = this.props;
        if (props.to) {
            return renderLink({
                className: props.className,
                'data-test-id': props['data-test-id'],
                style: props.style,
                to: props.to,
                onClick: this.props.onClick,
                onMouseDown: this.props.onMouseDown,
                onMouseUp: this._onMouseUp,
                onMouseEnter: this.props.onMouseEnter,
                onMouseLeave: this.props.onMouseLeave,
                children: props.children,
            });
        }
        if (props.href) {
            return (<a className={props.className} data-test-id={props['data-test-id']} href={props.href} style={props.style} onClick={this.props.onClick} onMouseDown={this.props.onMouseDown} onMouseUp={this._onMouseUp} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave}>
          {props.children}
        </a>);
        }
        return (<button className={props.className} data-test-id={props['data-test-id']} style={props.style} type={props.type || 'button'} onClick={this.props.onClick} onMouseDown={this.props.onMouseDown} onMouseUp={this._onMouseUp} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave}>
        {props.children}
      </button>);
    }
}
AbstractButton.defaultProps = {
    variant: ButtonVariant.Primary,
    type: 'button',
};
export default styled(AbstractButton) `
  align-items: flex-start;
  background: lightgray;
  border: none;
  border-radius: .3em;
  box-sizing: border-box;
  color: inherit;
  cursor: default;
  display: inline-block;
  font: inherit;
  letter-spacing: normal;
  margin: 0em;
  padding: .4em .8em;
  text-align: center;
  text-decoration: inherit;
  text-indent: 0px;
  text-rendering: auto;
  text-shadow: none;
  text-transform: none;
  touch-action: manipulation;
  word-spacing: normal;

  &:focus, &:hover {
    outline: none;
    background: gray;
  }
  &:active {
    background: dimgray;
  }
`;