import React from "react";
import { Props, State } from "./types";
import styles from "./EntityName.css";

class EntityName extends React.PureComponent<Props, State> {
  private static defaultProps: Partial<IProps> = {
    onClick: () => undefined
  };

  constructor(props: IProps) {
    super(props);
    this.state = { displayMessage: false };
  }

  handleButtonClick = () => {
    const { onClick } = this.props;
    this.setState({ displayMessage: true });
    onClick();
  }

  render() {
    const { displayMessage } = this.state;

    return (
      <div className={styles.entityName}>
        <p>This is a component</p>
        {
          displayMessage 
            ? <p>This is a message</p>
            : <button onClick={this.handleButtonClick}>Click to display message</button>
        }
      </div>
    );
  }
}

export default EntityName;