import React, { ReactNode } from 'react';

export type Props = {
  children: ReactNode;
  expandableWhat?: string;
};

type State = {
  open: boolean;
};

export default class Expandable extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { open: false };
    this.handleToggle = this.handleToggle.bind(this);
  }

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

  render() {
    const { open } = this.state;
    const { children, expandableWhat } = this.props;

    return (
      <div>
        <button type="button" className="btn btn-primary btn-sm" onClick={this.handleToggle}>
          {`${open ? 'Hide' : 'Show'} ${expandableWhat}`}
        </button>
        <br />
        <br />
        {open ? children : null}
      </div>
    );
  }
}