import { html } from "htm";
import * as React from "preact";

/** @typedef {0|0.5|1|1.5|2} Stage*/
/** @typedef {[set:Stage, get:React.StateUpdater<Stage>]} Binding */

const BranchContext = React.createContext(
  /** @type Binding */ ([0, (_n) => {}]),
);

/** @type {({children}:{children:preact.VNode})=>preact.VNode} */
export const Branch = (props) => {
  /** @type Binding */ const stage = React.useState(/** @type Stage */ (0));
  /** @type Binding */ const stageParent = React.useContext(BranchContext);

  React.useEffect(() => {
    if (stageParent[0] == 2) {
      stage[1](0);
    }
  }, [stageParent]);

  return html`<${BranchContext.Provider} value=${stage}>${props.children}<//>`;
};

export const Button = () => {
  /** @type Binding */
  const [stageGet, stageSet] = React.useContext(BranchContext);

  const handler = () => {
    let value = stageGet + 0.5;
    if (value > 2) value = 0;
    stageSet(value);
    console.log(value);
  };

  return html`<button onClick=${handler}>stage: ${stageGet}</button>`;
};