import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Box from '../box';
import cx from 'classnames';
import theme from './theme.css';
import omit from 'lodash.omit';

class IconTab extends PureComponent {
  static propTypes = {
    active: PropTypes.bool,
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    counter: PropTypes.node,
    element: PropTypes.node,
    icon: PropTypes.node.isRequired,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    element: 'a',
    active: false,
  };

  constructor() {
    super(...arguments);
    this.handleClick = ::this.handleClick;
  }

  handleClick(event) {
    if (this.props.onClick) {
      this.props.onClick(event);
    }
    if (event.pageX !== 0 && event.pageY !== 0) {
      this.blur();
    }
  }

  blur() {
    if (this.tabNode) {
      this.tabNode.getNode().blur();
    }
  }

  render() {
    const { active, className, counter = null, icon, ...others } = this.props;
    const classNames = cx(theme['icon-tab'], { [theme['is-active']]: active }, className);

    const rest = omit(others, ['onClick']);

    return (
      <Box
        data-teamleader-ui="icon-tab"
        className={classNames}
        paddingHorizontal={3}
        paddingVertical={4}
        ref={node => {
          this.tabNode = node;
        }}
        onClick={this.handleClick}
        {...rest}
      >
        {React.cloneElement(icon, { element: 'span' })}
        {counter && React.cloneElement(counter, { className: theme['counter'] })}
      </Box>
    );
  }
}

export default IconTab;

@@ -238,332 +238,8 @@
 t %7B%0A
-  static propTypes = %7B%0A    active: PropTypes.bool,%0A    children: PropTypes.node.isRequired,%0A    className: PropTypes.string,%0A    counter: PropTypes.node,%0A    element: PropTypes.node,%0A    icon: PropTypes.node.isRequired,%0A    onClick: PropTypes.func,%0A  %7D;%0A%0A  static defaultProps = %7B%0A    element: 'a',%0A    active: false,%0A  %7D;%0A%0A
   co
@@ -1251,16 +1251,316 @@
 %0A  %7D%0A%7D%0A%0A
+IconTab.propTypes = %7B%0A  active: PropTypes.bool,%0A  children: PropTypes.node.isRequired,%0A  className: PropTypes.string,%0A  counter: PropTypes.node,%0A  element: PropTypes.node,%0A  icon: PropTypes.node.isRequired,%0A  onClick: PropTypes.func,%0A%7D;%0A%0AIconTab.defaultProps = %7B%0A  element: 'a',%0A  active: false,%0A%7D;%0A%0A
 export d

move static propTypes & defaultProps outside of the component class