import React from 'react';
import { bool, string, node } from 'prop-types';
import styled from 'styled-components';

export const TableStyled = styled.table`
  display: ${props => props.isInitial || props.isHidden ? 'none' : 'table'};
  width: 100%;
  line-height: normal;
`;

class Table extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isInitial !== this.props.isInitial) return true;
    if (nextProps.isHidden !== this.props.isHidden) return true;
    if (nextProps.children !== this.props.children) return true;

    return false;
  }

  render() {
    const { isInitial, isHidden, children, className } = this.props;

    return (
      <TableStyled isInitial={isInitial} isHidden={isHidden} className={className}>
        <tbody>
          {children}
        </tbody>
      </TableStyled>
    );
  }
}

Table.propTypes = {
  isInitial: bool,
  isHidden: bool,
  children: node.isRequired,
  className: string,
};

Table.defaultProps = {
  isInitial: false,
  isHidden: false,
  className: undefined,
};

export default Table;
