class ProjectCard extends React.Component<void, Props, State> {
  props: Props;
  state: State;

  constructor (props: Props) {
    super(props);
    this.state = {
      isActive: true,
      isLocked: false
    };
  }

  componentDidMount() {
    console.log("start mount");
    console.log(this);

    this.onClick = this.onClick.bind(this);
    this.toggleLock = this.toggleLock.bind(this);
    this.toggleActive = this.toggleActive.bind(this);
    console.log("mounted, functions bound");
    //console.log(this.toggleActive);
    this.toggleActive();
    //manual fix, stackoverflow this.
  }

  componentWillUnmount() {
  }

  onClick () {
    window.location.href = this.props.href;
  }

  toggleLock () {
    this.setState({
      isLocked: !this.state.isLocked
    });
  }

  toggleActive () {
    console.log("toggling");
    console.log(this);
    this.setState({
      isActive: !this.state.isActive
    });
  }

  render (): React.Element<any> {
    const { name, date, img, href, options } = this.props;
    const { isActive, isLocked } = this.state;
    const wrapStyle = Object.assign({}, styles.wrap,
                    isActive || isLocked ? styles.wrapHover : styles.wrapNoHover);
    const topStyle = Object.assign({}, styles.top,
                   isActive || isLocked ? styles.topHover : styles.topNoHover);
    return (
      <div style={wrapStyle}
       onMouseEnter={this.toggleActive}
       onMouseLeave={this.toggleActive}
       key={`project${href}Wrap`}>
    <div style={topStyle}
         onClick={this.onClick}
         key={`project${href}Top`}>
      <img src={img}/>
    </div>
    <div style={styles.bottom}>
      <div style={styles.firstRow}>
            <!-- redacted -->
      </div>
    </div>
      </div>
    );
  }
}