/** @jsx h */
import ReactDOM from "react-dom"

export const Count = [
    ({ state, props }) => ({ value: state.count(Number), color: props.color }),
    ({ value, color }, h) => <h2 style={{ color, margin: 0 }}>{value}</h2>
]

export default [
    // 1
    function mapping({ state }, bitbox) {
        return {
            count: state.count(String),
            set: target => e => bitbox.set(target, state.count, Number(e.target.value || 0)),
            inc: target => e => bitbox.set(target, state.count, state.count((c = 0) => c + 1)),
            dec: target => e => bitbox.set(target, state.count, state.count((c = 0) => c - 1))
        }
    },
    // 2
    function component({ count, inc, dec, set }, h) {
        return (
            <main>
                <div style={{ padding: 16, background: "#f4f4f4" }}>
                    <Count color="red" />
                    <input onChange={set} value={count} />
                    <button onClick={inc}>+</button>
                    <button onClick={dec}>-</button>
                </div>
            </main>
        )
    },
    // 3
    function render(node) {
        ReactDOM.render(node, document.querySelector("#root"))
    }
    // ...
]