import React, { useState, useContext, useEffect, useCallback } from "react";
import {
  prop,
  asDescriptor,
  fromGenerator,
  Hookable,
  asFunctional,
} from "./hookable";
import Theme from "./Theme";

class Counter extends Hookable {
  initialCount = prop();

  current = asDescriptor(useState(this.initialCount));
  clicked = asDescriptor(useState());

  theme = useContext(Theme);

  onClick = useCallback(() => {
    this.current += 1;
    this.clicked = true;
  }, [this.current]);

  withLogging = fromGenerator(
    useEffect,
    function*() {
      console.log("did mount");
      yield;
      console.log("did unmount");
    },
    [],
  );

  render = this.withLogging(() => (
    <div>
      <p>
        Value:{" "}
        <span style={{ color: this.theme.numberColor }}>{this.current}</span>
      </p>
      {this.clicked && <p>You already clicked!</p>}
      <p>Initial value: {this.initialCount}</p>
      <button onClick={this.onClick}>Increase</button>
    </div>
  ));
}

export default asFunctional(Counter);