import React from 'react';
import { Component } from '@core/utils/BEM';
import PropTypes from 'prop-types';

// Style
/* istanbul ignore next */
if (typeof window !== 'undefined') require('./style.scss');

export default class Button extends Component {
  constructor(props) {
    super(props, 'Button');
  }

  static propTypes = {
    ...Component.propTypes,
    circular: PropTypes.bool,
    ghost: PropTypes.bool,
    href: PropTypes.string,
    size: PropTypes.oneOf(['sm', 'md', 'lg']),
    text: PropTypes.bool,
    type: PropTypes.oneOf(['submit', 'reset', 'button']),
  };

  static defaultProps = {
    size: 'md',
    type: 'button',
  };

  get Tag() {
    return 'href' in this.props && this.props.href ? 'a' : 'button';
  }

  render() {
    const { bem, children, circular, className, ghost, size, text, type, ...attrs } = this.props;

    const ButtonClasses = [
      this.bem(bem),
      `Button_${size}`,
      className,
      circular && 'Button_circular',
      ghost && 'Button_ghost',
      text && 'Button_text',
    ]
      .filter(e => e)
      .join(' ');

    return (
      <this.Tag {...attrs} className={ButtonClasses} type={type}>
        {children}
      </this.Tag>
    );
  }
}
