import * as atom from "@thi.ng/atom";
 
const a = new atom.Atom(23);
 
// obtain value via deref()
a.deref();
// 23
 
// add watch to observe value changes
a.addWatch("foo", (id, prev, curr) => console.log(`${id}: ${prev} -> ${curr}`));
// true
 
// example update function
const add = (x, y) => x + y;
 
// apply given function to current value
// (incl. any additional arguments passed to swap)
// this is the same as:
// a.reset(adder(a.deref(), 1))
a.swap(add, 1);
// foo: 23 -> 24
 
// reset atom's value
a.reset(42);
// foo: 24 -> 42

a = new atom.Atom({a: {b: {c: 1}}})
// cursor to `b` value
b=new atom.Cursor(a, "a.b")
// cursor to `c` value, relative to `b`
c=new atom.Cursor(b, "c")
 
c.reset(2);
 
b.deref();
// { c: 2 }
 
a.deref();
// { a: { b: { c: 2 } } }

// main state
main = new atom.Atom({ a: { b: { c: 23 }, d: { e: 42 } }, f: 66 });
 
// cursor to `c` value
cursor = new atom.Cursor(main, "a.b.c");
// or
cursor = new atom.Cursor(main, ["a","b","c"]);
 
// alternatively provide path implicitly via lookup & update functions
// both fns will be called with cursor's parent state
// this allows the cursor implementation to work with any data structure
// as long as the updater DOES NOT mutate in place
cursor = new atom.Cursor(
    main,
    (s) => s.a.b.c,
    (s, x) => ({...s, a: {...s.a, b: {...s.a.b, c: x}}})
);
 
// add watch just as with Atom
cursor.addWatch("foo", console.log);
 
cursor.deref()
// 23
 
cursor.swap(x => x + 1);
// foo 23 24
 
main.deref()
// { a: { b: { c: 24 }, d: { e: 42 } }, f: 66 }

db = new atom.Atom({a: 1, b: {c: 2}});
 
// create a view for a's value
viewA = db.addView("a");
 
// create a view for c's value w/ transformer
viewC = db.addView("b.c", (x) => x * 10);
 
viewA.deref()
// 1
 
viewC.deref()
// 20
 
// update the atom
db.swap((state) => atom.setIn(state, "b.c", 3))
 
// views can indicate if their value has changed
// (will be reset to `false` after each deref)
 
// here viewA hasn't changed (we only updated `c`)
viewA.changed()
// false
viewC.changed()
// true
 
// the transformer function is only executed once per value change
viewC.deref()
// 30
 
// just returns current cached transformed value
viewC.deref()
// 30
 
// discard views
viewA.release()
viewC.release()

let x;
let a = new Atom({value: 1})
 
// create an eager view by passing `false` as last arg
view = a.addView("value", (y) => (x = y, y * 10), false);
 
// check `x` to verify that transformer already has run
x === 1
// true
 
// reset x
x = null
 
// verify transformed value
view.deref() === 10
// true
 
// verify transformer hasn't rerun because of deref()
x === null
// true

import { Atom, setIn } from "@thi.ng/atom";
import { start } from "@thi.ng/hdom";
 
// central immutable app state
const db = new Atom({ state: "login" });
 
// define views for different state values
const appState = db.addView<string>("state");
const error = db.addView<string>("error");
// specify a view transformer for the username value
const user = db.addView<string>(
    "user.name",
    (x) => x ? x.charAt(0).toUpperCase() + x.substr(1) : null
);
 
// state update functions
const setValue = (path, val) => db.swap((state) => setIn(state, path, val));
const setState = (s) => setValue(appState.path, s);
const setError = (err) => setValue(error.path, err);
const setUser = (e) => setValue(user.path, e.target.value);
const loginUser = () => {
    if (user.deref() && user.deref().toLowerCase() === "admin") {
        setError(null);
        setState("main");
    } else {
        setError("sorry, wrong username (try 'admin')");
    }
};
const logoutUser = () => {
    setValue(user.path, null);
    setState("logout");
};
 
// components for different app states
// note how the value views are used here
const uiViews = {
    // dummy login form
    login: () =>
        ["div#login",
            ["h1", "Login"],
            error.deref() ? ["div.error", error.deref()] : undefined,
            ["input", { type: "text", onchange: setUser }],
            ["button", { onclick: loginUser }, "Login"]
        ],
    logout: () =>
        ["div#logout",
            ["h1", "Good bye"],
            "You've been logged out. ",
            ["a",
                { href: "#", onclick: () => setState("login") },
                "Log back in?"
            ]
        ],
    main: () =>
        ["div#main",
            ["h1", `Welcome, ${user.deref()}!`],
            ["div", "Current app state:"],
            ["div",
                ["textarea",
                    { cols: 40, rows: 10 },
                    JSON.stringify(db.deref(), null, 2)]],
            ["button", { onclick: logoutUser }, "Logout"]
        ]
};
 
// finally define another derived view for the app state value
// including a transformer, which maps the current app state value
// to its correct UI component (incl. a fallback for illegal app states)
const currView = db.addView(
    appState.path,
    (state) =>
        uiViews[state] ||
        ["div", ["h1", `No component for state: ${state}`]]
);
 
// app root component
const app = () =>
    ["div#app",
        currView.deref(),
        ["footer", "Made with @thi.ng/atom and @thi.ng/hdom"]];
 
start(document.body, app);

db = new atom.History(new atom.Atom({a: 1}))
db.deref()
// {a: 1}
 
db.reset({a: 2, b: 3})
db.reset({b: 4})
 
db.undo()
// {a: 2, b: 3}
 
db.undo()
// {a: 1}
 
db.undo()
// undefined (no more undo possible)
db.canUndo()
// false
 
db.redo()
// {a: 2, b: 3}
 
db.redo()
// {b: 4}
 
db.redo()
// undefined (no more redo possible)
 
db.canRedo()
// false