import { defAtom } from "@thi.ng/atom";

const a = defAtom(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

const db = defAtom({ a: { b: 1, c: 2 } });

// type checked access
db.resetIn(["a", "b"], 100);
// { a: { b: 100, c: 2 } }

// unchecked access
db.resetInUnsafe("a.b", 100);
// { a: { b: 100, c: 2 } }

// type checked access
// type of `x` in update function is automatically inferred too
db.swapIn(["a", "c"], (x) => x + 1);
// { a: { b: 100, c: 3 } }

// unchecked access
db.swapInUnsafe("a.c", (x) => x + 1);
// { a: { b: 100, c: 4 } }

interface Item {
    name: string;
}

const db = defAtom<Item[]>([{ name: "thi.ng" }, { name: "atom" }]);

const id = 1;

// using <const> expr
db.resetIn(<const>[id, "name"], "umbrella");

// unchecked
db.resetInUnsafe([id, "name"], "umbrella");

// unchecked (string path)
db.resetInUnsafe(`${id}.name`, "umbrella");

const db = defAtom<any>({ a: 1, b: 2 });
const tx = defTransacted(db);

// start transaction
tx.begin();

// alternatively use syntax sugar for:
// `defTransacted(db).begin()`
tx = beginTransaction(db);

// perform multiple updates
// (none of them are applied to the parent state
// until `commit` is called)
// IMPORTANT: calling any of these update methods without
// a running transaction will throw an error!
tx.resetIn(["a"], 11);
tx.resetIn(["c"], 33);

// tx.deref() will always return latest state
tx.deref()
// { a: 11, b: 2, c: 33 }

// however, at this point the parent
// still contains pre-transaction state...
db.deref()
// { a: 1, b: 2 }

// apply all changes at once (or `cancel()` transaction)
tx.commit();
// { a: 11, b: 2, c: 33 }

// verify parent state
db.deref()
// { a: 11, b: 2, c: 33 }

const tx1 = beginTransaction(db);
tx1.resetIn(["a"], 10);

// nested transaction
const tx2 = beginTransaction(tx1);
tx2.resetIn(["b"], 20);
tx2.commit();

tx1.commit();

db.deref();
// { a: 10, b: 20 }

const tx = beginTransaction(db);
tx.resetIn(["a"], 10);

// attempting to update parent will throw an error
db.resetIn(["a"], 2);

a = defAtom({a: {b: {c: 1}}})
// cursor to `b` value
b = defCursor(a, "a.b")
// cursor to `c` value, relative to `b`
c = defCursor(b, "c")

c.reset(2);

b.deref();
// { c: 2 }

a.deref();
// { a: { b: { c: 2 } } }

// main state
main = defAtom({ a: { b: { c: 23 }, d: { e: 42 } }, f: 66 });

// cursor to `c` value
cursor = defCursor(main, ["a", "b", "c"]);

// or
cursor = defCursorUnsafe<number>(main, "a.b.c");

// 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 = defAtom({ a: 1, b: { c: 2 } });

// create a view for a's value
viewA = defView(db, ["a"]);

// create a view for c's value w/ transformer
viewC = defView(db, ["b","c"], (x) => x * 10);

// or unchecked
viewC = defViewUnsafe(db, "b.c", (x) => x * 10);

viewA.deref()
// 1

viewC.deref()
// 20

// update the atom
db.resetIn(["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 = 0;
let a = defAtom({ value: 1 })

// create an eager view by passing `false` as last arg
view = defView(["value"], (y) => (x = y, y * 10), false);

// check `x` to verify that transformer already has run
x === 1
// true

// reset x
x = 0

// verify transformed value
view.deref() === 10
// true

// verify transformer hasn't rerun because of deref()
x === 0
// true

import type { Nullable, Path } from "@thi.ng/api";
import { defAtom, defView } from "@thi.ng/atom";
import { start } from "@thi.ng/hdom";
import { capitalize } from "@thi.ng/strings";

interface State {
    state: string;
    error?: string;
    user: {
        name?: string;
    };
}

// central immutable app state
const db = defAtom<State>({ state: "login", user: {} });

// define views for different state values
const appState = defView(db, ["state"]);

// the error view converts the state value into a UI component array
const error = defView(db, ["error"], (error) =>
    error ? ["div.error", error] : null
);

// view transformer for the username value
const user = defView(db, ["user", "name"], (name) =>
    name ? capitalize(name) : null
);

// state update functions

// trigger new route / UI view
const setState = (s: string) => setValue(appState.path, s);

const setError = (err: Nullable<string>) => setValue(error.path, err);

const setUser = (e: Event) => setValue(user.path, (<any>e.target).value);

const setValue = (path: Path, val: any) => db.resetInUnsafe(path, val);

const loginUser = () => {
    if (user.deref() === "admin") {
        setError(null);
        setState("main");
    } else {
        setError("sorry, wrong username (try 'admin')");
    }
};

const logoutUser = () => {
    setValue(user.path, null);
    setState("logout");
};

// UI components for different app states
// note how the value views are used here
const uiViews: any = {
    // dummy login form
    login: () => [
        "div#login",
        ["h1", "Login"],
        // embedded error view (will auto-deref)
        error.deref(),
        ["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 = defView(
    db,
    ["state"],
    (state) => uiViews[state] || ["div", ["h1", `No component for state: ${state}`]]
);

// app root component
// embedded view (will auto-deref)
start(() => ["div", currView]);

// create history w/ max. 100 steps
db = defHistory(defAtom({ a: 1 }), 100)
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