import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';

export default
class Spoilers extends React.PureComponent {
  static propTypes = {
    spoilerText: PropTypes.string,
    children: PropTypes.node,
  };

  state = {
    hidden: true,
  }

  handleSpoilerClick = () => {
    this.setState({ hidden: !this.state.hidden });
  }

  render () {
    const { spoilerText, children } = this.props;
    const { hidden } = this.state;

      const toggleText = hidden ?
        <FormattedMessage
          id='status.show_more'
          defaultMessage='Show more'
          key='0'
        /> :
        <FormattedMessage
          id='status.show_less'
          defaultMessage='Show less'
          key='0'
        />;

    return ([
      <p className='spoiler__text'>
        {spoilerText}
        {' '}
        <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
          {toggleText}
        </button>
      </p>,
      <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
        {children}
      </div>
    ]);
  }
}