import React from 'react';
import PropTypes from 'prop-types';

// Style
/* istanbul ignore next */
if (typeof window !== 'undefined') require('./style.scss');

class ShowMore extends React.Component {
  static propTypes = {
    children: PropTypes.array,
    className: PropTypes.array,
    fade: PropTypes.bool,
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    label: PropTypes.string,
    labelClose: PropTypes.string,
    open: PropTypes.bool,
  };

  static defaultProps = {
    fade: true,
    height: '',
    label: 'Show More',
    labelClose: 'Show Less',
    open: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false,
    };
  }

  handleClick = () => this.setState({ open: !this.state.open });

  render() {
    const { children, fade, height, label, labelClose, open, ...props } = this.props;
    return (
      <div
        className={`ShowMore ${!fade || 'ShowMore_fade'} ${props.className}`}
        open={this.state.open}
        style={{ maxHeight: this.state.open ? '' : height }}
      >
        {children}
        <div
          className="ShowMore-toggle"
          onClick={this.handleClick}
          onKeyDown={this.handleClick}
          role="button"
          tabIndex={0}
        >
          {this.state.open ? labelClose : label}
        </div>
      </div>
    );
  }
}

export default ShowMore;
