import React from 'react';
import PropTypes from 'prop-types';
import { calculateStyles } from '@bufferapp/components/lib/utils';
import PseudoClassComponent from '@bufferapp/components/PseudoClassComponent';

const TableCellStateless = ({
  children,
  hovered,
  onMouseEnter,
  onMouseLeave,
}) => {
  const style = calculateStyles({
    default: {},
    hovered: {},
  }, {
    hovered,
  });
  return (
    <div
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={style}
    >
      {children}
    </div>
  );
};

TableCellStateless.defaultProps = {
  children: '',
  hovered: false,
  onMouseEnter: undefined,
  onMouseLeave: undefined,
};

TableCellStateless.propTypes = {
  children: PropTypes.node,
  hovered: PropTypes.bool,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
};

class TableCell extends PseudoClassComponent {
  render() {
    const { children, ...rest } = this.props;
    let hoveredChildren = children;

    // string as children isn't clonable
    if (React.isValidElement(children)) {
      hoveredChildren = React.cloneElement(
        children,
        { hovered: this.state.hovered },
      );
    }

    return (
      <TableCellStateless
        {...rest}
        hovered={this.state.hovered}
        onMouseEnter={() => this.handleMouseEnter()}
        onMouseLeave={() => this.handleMouseLeave()}
      >
        {hoveredChildren}
      </TableCellStateless>
    );
  }
}

export default TableCell;