import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import './step.scss'; // eslint-disable-line no-unused-vars
import Icon from '../../Icon';


class Step extends PureComponent {
  static componentName = 'Step';

  static propTypes = {
    children: PropTypes.node,
    component: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object,
      PropTypes.func
    ]),
    title: PropTypes.string,
    index: PropTypes.number,
    enabled: PropTypes.bool,
    lastEnabled: PropTypes.bool,
    onClick: PropTypes.func,
    value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]),
    selected: PropTypes.bool,
    variant: PropTypes.oneOf(['primary']),
    withBorder: PropTypes.bool,
    size: PropTypes.oneOf(['sm', 'md', 'lg']),
    icon: PropTypes.string,
    withRightArrow: PropTypes.bool,
    forbidden: PropTypes.bool,
    className: PropTypes.string
  };

  static defaultProps = {
    children: null,
    title: '',
    index: 1,
    component: 'button',
    value: null,
    enabled: false,
    lastEnabled: false,
    selected: false,
    onClick: null,
    withBorder: false,
    variant: 'primary',
    size: 'md',
    icon: null,
    withRightArrow: false,
    forbidden: false,
    className: undefined
  };

  onClick = event => {
    const { index, value, onClick, enabled, forbidden } = this.props;
    if (enabled && !forbidden) {
      if (onClick) {
        onClick({ event, index, value });
      }
    } else {
      event.stopPropagation();
      event.preventDefault();
    }
  };

  render() {
    const { index, enabled, lastEnabled, selected, component, forbidden,
      children, variant, size, icon, withBorder, withRightArrow, className, ...rest
    } = this.props;
    const MyComponent = component;
    delete rest.onClick;

    return (
      <MyComponent
        styleName={classNames(`step--${variant}`, `size-${size}`, {
          [`step--${variant}--selected`]: selected,
          [`step--${variant}--enabled`]: enabled,
          [`step--${variant}--last-enabled`]: lastEnabled,
          [`step--${variant}--with-right-arrow`]: withRightArrow,
          'with-border': withBorder,
          'step-forbidden': forbidden
        })}
        className={className}
        onClick={this.onClick}
        {...rest}
      >
        <span
          styleName={
            classNames(`decorator--${variant}`, {
              'decorator--selected': selected,
              'decorator--enabled': enabled
            })
          }
        >
          {icon ? <Icon size={size} name={icon} /> : (index + 1)}
        </span>
        <span
          styleName={
            classNames(`title--${variant}`, {
              [`title--${variant}--enabled`]: enabled,
              [`title--${variant}--selected`]: selected
            })
          }
        >
          {children}
        </span>
        {
          withBorder
          && <span
            styleName={
              classNames('arrow', {
                'arrow--selected': selected
              })
            }
          />
        }
      </MyComponent>
    );
  }
}


export default Step;
