import {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import FilledButton from './filled-button';
import FlatButton from './flat-button';
import OutlineButton from './outline-button';

class Button extends Component {
  getSizeClass = () => {
    const sizePaddingMap = {
      default: {
        zero: `p-0`,
        xs: 'py-0.5 px-1',
        sm: 'py-1 px-2',
        base: 'py-1.5 px-3',
        lg: 'py-2 px-4',
        xl: 'py-2.5 px-5'
      },
      circular: {
        zero: `p-0`,
        xs: 'p-0.5',
        sm: 'p-1',
        base: 'p-1.5',
        lg: 'p-2',
        xl: 'p-2.5'
      }
    };
    const {size, textSize, circular} = this.props;
    return `text-${textSize} ${sizePaddingMap[circular ? 'circular' : 'default'][size]}`;
  };

  getContainer = () => {
    if (this.props.flat) return FlatButton;
    if (this.props.outline) return OutlineButton;
    return FilledButton;
  };

  render() {
    const Container = this.getContainer();

    return (
      <Container
        {...this.props}
        className={classNames(
          this.getSizeClass(),
          this.props.inline ? 'inline-flex' : 'flex',
          `justify-${this.props.justifyContent} items-center`,
          this.props.className
        )}
      >
        {(this.props.content !== undefined) ? this.props.content : this.props.children}
        {this.props.loading && (
          <svg
            className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
            xmlns='http://www.w3.org/2000/svg'
            fill='none'
            viewBox='0 0 24 24'
          >
            <circle
              className='opacity-25'
              cx='12'
              cy='12'
              r='10'
              stroke='currentColor'
              strokeWidth='4'
            />
            <path
              className='opacity-75'
              fill='currentColor'
              d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
            />
          </svg>
        )}
      </Container>
    );
  }
}

Button.defaultProps = {
  type: 'button',
  inline: false,
  outline: false,
  flat: false,
  size: 'base',
  textSize: 'sm',
  justifyContent: 'center',
  color: 'blue',
  colorWeight: 500,
  borderWeight: 1,
  loading: false,
  disabled: false,
  circular: false
};

Button.propTypes = {
  content: PropTypes.string,
  color: PropTypes.string.isRequired,
  colorWeight: PropTypes.number.isRequired,
  borderWeight: PropTypes.number.isRequired,
  textColor: PropTypes.string,
  textColorWeight: PropTypes.string,
  type: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  children: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.arrayOf(PropTypes.node)
  ]),
  inline: PropTypes.bool.isRequired,
  outline: PropTypes.bool.isRequired,
  flat: PropTypes.bool.isRequired,
  size: PropTypes.oneOf(['zero', 'xs', 'sm', 'base', 'lg', 'xl']).isRequired,
  textSize: PropTypes.oneOf(['xs', 'sm', 'base', 'lg', 'xl']).isRequired,
  justifyContent: PropTypes.oneOf(['start', 'center', 'end', 'between', 'around', 'evenly']).isRequired,
  loading: PropTypes.bool.isRequired,
  disabled: PropTypes.bool.isRequired,
  circular: PropTypes.bool.isRequired,
  className: PropTypes.string
};

export default Button;
