import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Box from '../box';
import Button, { IconButton } from '../button';
import cx from 'classnames';
import theme from './theme.css';
import { IconCloseMediumOutline, IconCloseSmallOutline } from '@teamleader/ui-icons';

class Tag extends PureComponent {
  static propTypes = {
    children: PropTypes.any,
    className: PropTypes.string,
    inverse: PropTypes.bool,
    label: PropTypes.string,
    onLabelClick: PropTypes.func,
    onRemoveClick: PropTypes.func,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
  };

  static defaultProps = {
    inverse: false,
    size: 'medium',
  };

  render() {
    const { children, className, inverse, label, onLabelClick, onRemoveClick, size, ...others } = this.props;

    const classNames = cx(
      theme['tag'],
      theme[`is-${size}`],
      {
        [theme['is-removable']]: onRemoveClick,
        [theme['is-inverse']]: inverse,
      },
      className,
    );

    const closeButtonColor = inverse ? 'white' : 'neutral';
    const closeButtonIcon = size === 'large' ? <IconCloseMediumOutline /> : <IconCloseSmallOutline />;

    return (
      <Box className={classNames} data-teamleader-ui="tag" {...others}>
        {onLabelClick ? (
          <Button className={theme['label-button']} onClick={onLabelClick} level="outline" inverse={inverse}>
            {label}
            {children}
          </Button>
        ) : (
          <span className={theme['label']}>
            {label}
            {children}
          </span>
        )}

        {onRemoveClick && (
          <IconButton
            className={theme['remove-button']}
            color={closeButtonColor}
            icon={closeButtonIcon}
            onClick={onRemoveClick}
            size="small"
          />
        )}
      </Box>
    );
  }
}

export default Tag;

@@ -382,16 +382,27 @@
 ypes.any
+.isRequired
 ,%0A    cl
@@ -461,37 +461,8 @@
 ol,%0A
-    label: PropTypes.string,%0A
     
@@ -719,15 +719,8 @@
 rse,
- label,
  onL
@@ -1367,36 +1367,16 @@
 verse%7D%3E%0A
-            %7Blabel%7D%0A
         
@@ -1472,28 +1472,8 @@
 %5D%7D%3E%0A
-            %7Blabel%7D%0A
     

Remove label prop and make children required