import { HAppActions, happel, HDispatcher, HState, HView } from "../src/hsml-app";

interface CounterState {
    count: number;
}

enum CounterActions {
    dec = "counter-dec",
    inc = "counter-inc",
    eventCount = "counter-event-count"
}

const counterState: HState<CounterState> = function () {
    return {
        count: 77
    }
};

const counterView: HView<CounterState, CounterActions> = function (state) {
    return [
        ["h3", ["Counter"]],
        ["p", [
            ["em", ["Count"]], ": ", state.count,
            " ",
            ["button", { on: ["click", CounterActions.dec, 1] }, ["-"]],
            ["button", { on: ["click", CounterActions.inc, 2] }, ["+"]]
        ]]
    ];
};

const counterDispatcher: HDispatcher<CounterState, CounterActions> = async function (action, state, dispatch) {
    // console.log("action counter:", action);
    // console.log("state counter:", state);
    // console.log("happ counter:", this);

    switch (action.type) {
        case HAppActions.init:
        case HAppActions.mount:
        case HAppActions.umount:
            break;

        case HAppActions.attribute:
            if (action.data.attrName === "count") {
                state.count = Number(action.data.newVal);
            }
            break;

        case CounterActions.inc:
            state.count = state.count + action.data as number;
            setTimeout(() => dispatch(CounterActions.dec, 1), 1e3); // async call
            dispatch.event(CounterActions.eventCount, state.count);
            break;

        case CounterActions.dec:
            state.count = state.count - action.data as number;
            dispatch.event(CounterActions.eventCount, state.count);
            break;
    }
};

happel<CounterState, CounterActions>(
    "happ-counter",
    {
        state: counterState,
        view: counterView,
        dispatcher: counterDispatcher,
        // id: "counter",
        // attributes: ["count"],
        debug: true
    }
);


interface AppState {
    count: number;
}

enum AppActions {
    count = "app-count"
}

const appState: HState<AppState> = function () {
    return {
        count: 33
    }
};

const appView: HView<AppState, AppActions> = function (state) {
    return [
        ["h2", ["App count: ", state.count]],
        ["happ-counter", {
            count: state.count,
            on: [CounterActions.eventCount, AppActions.count]
        }]
    ];
};

const appDispatcher: HDispatcher<AppState, AppActions | CounterActions> = async function (action, state, dispatch) {
    // console.log("action:", action);
    // console.log("state:", state);
    // console.log("happ:", this);

    switch (action.type) {
        case HAppActions.attribute:
            if (action.data.attrName === "count") {
                state.count = Number(action.data.newVal);
            }
            break;
        case AppActions.count:
            state.count = action.data as number;
            dispatch.event(CounterActions.eventCount, state.count);
            dispatch.event(CounterActions.eventCount, state.count, window);
            break;
    }
};

happel<AppState, AppActions | CounterActions>("happ-app", {
    state: appState,
    view: appView,
    dispatcher: appDispatcher,
    // id: "app",
    // attributes: [],
    debug: true
});