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

import './table.scss';

class TableRowColumn extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    /**
     * Children passed to table row column.
     */
    children: PropTypes.node,
    /**
     * @ignore in documentation
     * Number to identify the header row. This property
     * is automatically populated when used with TableBody.
     */
    columnNumber: PropTypes.number,
    /**
     * Controls sortable.
     */
    sort: PropTypes.array,
    sortedOrder: PropTypes.string,
    order: PropTypes.string,
    /**
     * Controls variant type checkbox.
     */
    checkbox: PropTypes.bool,
    /**
     * Controls status selected.
     */
    selected: PropTypes.bool,
    /**
     * @ignore in documentation
     * */
    onClick: PropTypes.func,
    selectable: PropTypes.bool,
    multiSelectable: PropTypes.bool
  };

  static defaultProps = {
    className: undefined,
    children: null,
    columnNumber: null,
    sort: null,
    sortedOrder: null,
    order: 'asc',
    checkbox: false,
    selected: false,
    onClick: null,
    selectable: false,
    multiSelectable: false
  };

  onClick = event => {
    const { onClick, columnNumber, order, sort, sortedOrder } = this.props;
    let restultOrder = order;
    if (sortedOrder) {
      restultOrder = sortedOrder === 'asc' ? 'desc' : 'asc';
    }
    if (onClick) {
      onClick(event, { columnNumber, order: restultOrder, sort });
    }
    event.stopPropagation();
  };

  render() {
    const {
      checkbox, selected, sort, sortedOrder, order, selectable, multiSelectable, className, ...rest
    } = this.props;
    delete rest.columnNumber;
    delete rest.onClick;
    return (
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      <td
        styleName={classNames('table-row-column', {
          'table-row-column--checkbox': checkbox,
          'table-row-column--selected': selected,
          'table-row-column--sortable': sort,
          'table-row-column--sorted': sortedOrder,
          'table-row-column--not--selectable': !selectable && !multiSelectable,
          'table-row-column--selectable': selectable,
          [`table-row-column--order-${sortedOrder || order}`]: sort && order
        })}
        className={className}
        onClick={this.onClick}
        {...rest}
      />
    );
  }
}

export default TableRowColumn;
