import React from "react"
import { useStateDesigner } from "@state-designer/react"

function App() {
  const { data, send, can, whenIn } = useStateDesigner({
    data: { count: 1 },
    initial: "inactive",
    states: {
      inactive: {
        on: { TOGGLED: { to: "active" } },
      },
      active: {
        on: {
          TOGGLED: { to: "inactive" },
          CLICKED_PLUS: { if: "belowMax", do: "increment" },
          CLICKED_MINUS: "decrement",
        },
      },
    },
    actions: {
      increment(d) {
        d.count++
      },
      decrement(d) {
        d.count--
      },
    },
    conditions: {
      belowMax(d) {
        return d.count < 10
      },
    },
  })

  return (
    <div className="App">
      <h2>{data.count}</h2>
      <button
        disabled={!can("CLICKED_MINUS")}
        onClick={() => send("CLICKED_MINUS")}
      >
        -1
      </button>
      <button
        disabled={!can("CLICKED_PLUS")}
        onClick={() => send("CLICKED_PLUS")}
      >
        +1
      </button>
      <button onClick={() => send("TOGGLED")}>
        {whenIn({
          active: "Turn Off",
          inactive: "Turn On",
        })}
      </button>
    </div>
  )
}

export default App