// @flow

import React, { Component } from "react"

type Props = Object

type State = {
  hovered: boolean,
  focused: boolean,
  depressed: boolean,
}

const stateful = (FunctionalComponent: Function): ReactElement => {
  return class Stateful extends Component<void, Props, State> {

    props: Props;

    state: State = {
      hovered: false,
      focused: false,
      depressed: false,
    };

    handleMouseEnter: Function = (): void => {
      this.setState({ hovered: true })
    };

    handleMouseLeave: Function = (): void => {
      this.setState({ hovered: false })
    };

    handleFocus: Function = (): void => {
      this.setState({ focused: true })
    };

    handleBlur: Function = (): void => {
      this.setState({ focused: false })
    };

    handleMouseDown: Function = (): void => {
      this.setState({ depressed: true })
    };

    handleMouseUp: Function = (): void => {
      this.setState({ depressed: false })
    };

    render() {
      return (
        React.cloneElement(
          React.Children.only(FunctionalComponent(this.props, this.state)),
          {
            onMouseEnter: this.handleMouseEnter,
            onMouseLeave: this.handleMouseLeave,
            onFocus: this.handleFocus,
            onBlur: this.handleBlur,
            onMouseDown: this.handleMouseDown,
            onMouseUp: this.handleMouseUp,
          }
        )
      )
    }
  }
}

export default stateful