import React, { Component } from 'react';
import { Link } from 'gatsby';
import { css } from '@emotion/core';
import { SerializedStyles } from '@emotion/serialize';

import * as Styles from './button.styles';
import * as Constants from './button.constants';
import { ButtonPriorityOption, ButtonSizeOption } from './button.types';
import LoadingSpinner from 'components/loading-spinner';
import { colors } from 'utils/theme';

export interface ButtonProps {
  children: React.ReactNode;
  isInternal?: boolean;
  isDisabled?: boolean;
  isLoading: boolean;
  size: ButtonSizeOption;
  priority?: ButtonPriorityOption;
  fullwidth: boolean;
  url?: string;
  customCSS?: SerializedStyles; // @TODO: refactor so we don't need this
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

class Button extends Component<ButtonProps> {
  static defaultProps = {
    isInternal: false,
    isDisabled: false,
    fullwidth: false,
    size: 'normal',
    priority: 'primary',
    url: null,
    isLoading: false
  };

  onClick = (event: React.MouseEvent<any>): void => {
    if (this.props.isDisabled) {
      // Should only reach here if is gatsby link
      // As the `to` prop is required
      // So cannot programatically remove
      event.preventDefault();
    } else if (this.props.onClick) {
      this.props.onClick(event);
    }
  };

  renderButtonContent = () => {
    return (
      <Styles.ButtonContent>
        <div
          css={css`
            opacity: ${this.props.isLoading ? 0 : 1};
          `}
        >
          {this.props.children}
        </div>
        { this.props.isLoading &&
          <Styles.ButtonLoading>
            <LoadingSpinner
              color={'white'}
              width="20px"
            />
          </Styles.ButtonLoading>
        }
      </Styles.ButtonContent>
    )
  }

  getButtonPriorityCss = (): SerializedStyles => this.props.priority === 'primary' ? Styles.ButtonPrimary : Styles.ButtonSecondary;

  render(): JSX.Element {
    const {isDisabled, customCSS, size, fullwidth} = this.props;

    const buttonSize = Constants.SIZES[size];
    const buttonWidth = {width: fullwidth ? '100%' : 'auto'};

    if (this.props.isInternal && this.props.url) {
      return (
        <Link
          to={this.props.url}
          onClick={this.onClick}
          style={{...buttonSize, ...buttonWidth}}
          css={css`
            ${Styles.ButtonPrimary}
            ${this.getButtonPriorityCss()}
            ${isDisabled || this.props.isLoading ? Styles.ButtonDisabled : ''}
            ${customCSS}
            display: inline-block;
          `}
        >
          {this.renderButtonContent()}
        </Link>
      );
    } else if (this.props.onClick) {
      return (
        <button
          disabled={isDisabled || this.props.isLoading}
          style={{...buttonSize, ...buttonWidth}}
          {...(!isDisabled && {onClick: this.onClick})}
          css={css`
            ${Styles.ButtonReset}
            ${this.getButtonPriorityCss()}
            ${isDisabled ? Styles.ButtonDisabled : Styles.ButtonEnabled}
            ${customCSS}
          `}
        >
          {this.renderButtonContent()}
        </button>
      );
    }

    return (
      <a
        {
          ...(!isDisabled || !this.props.isLoading && {
            href: this.props.url,
            target: '_blank'
          })
        }
        style={{...buttonSize, ...buttonWidth}}
        css={css`
          ${Styles.Button}
          ${this.props.isDisabled ? Styles.ButtonDisabled : {}}
        `}
      >
        {this.renderButtonContent()}
      </a>
    );
  }
}

export default Button;