import { inject } from 'hydux'

export default {
  init: () => ({ count: 1 }),
  actions: {
    down() {
      let { state, actions, setState, Cmd } = inject<State, Actions>()
      setState({ count: state.count - 1 })
      Cmd.addSub(_ => _.log('down -1'))
      actions.up()
    },
    up() {
      let { state, actions } = inject<State, Actions>()
      return { count: state.count + 1 }
    },
    log(msg) {
      console.log(msg)
    }
  },
  view: (state, actions) => {
    return (
      <div>
        <h1>{state.count}</h1>
        <button onclick={actions.down}>–</button>
        <button onclick={actions.up}>+</button>
      </div>
    )
  }
}

import * as Hydux from 'hydux'

const { Cmd } = Hydux

export function init() {
  return {
    state: { // pojo state
      count: 1,
    },
    cmd: Cmd.ofSub( // update your state via side effects.
      _ => fetch('https://your.server/init/count') // `_` is the real actions, don't confuse with the plain object `actions` that we created below, calling functions from plain object won't trigger state update!
        .then(res => res.json())
        .then(count => _.setCount(count))
    )
  }
}

export const actions = {
  setCount: n => (state, actions) => {
    return { count: n }
  }
}

// App.tsx
import { React } from 'hydux-react'
import * as Hydux from 'hydux'
import * as Counter from 'Counter'
const Cmd = Hydux.Cmd

export const init = () => {
  const counter1 = Counter.init()
  const counter2 = Counter.init()
  return {
    state: {
      counter1: counter1.state,
      counter2: counter2.state,
    },
    cmd: Cmd.batch(
      Cmd.map((_: Actions) => _.counter1, counter1.cmd), // Map counter1's init command to parent component
      Cmd.map((_: Actions) => _.counter2, counter2.cmd), // Map counter2's init command to parent component
      Cmd.ofSub(
        _ => // some other commands of App
      )
    )
  }
}

export const actions = {
  counter1: Counter.actions,
  counter2: Counter.actions,
  // ... other actions
}

export const view = (state: State, actions: Actions) => (
  <main>
    <h1>Counter1:</h1>
    {Counter.view(state.counter1, actions.counter1)}
    <h1>Counter2:</h1>
    {Counter.view(state.counter2, actions.counter2)}
  </main>
)

export type Actions = typeof actions
export type State = ReturnType<typeof init>['state']

// Combine all sub components's init/actions/views, auto map init commands.
const subComps = Hydux.combine({
  counter1: [Counter, Counter.init()],
  counter2: [Counter, Counter.init()],
})
export const init2 = () => {
  return {
    state: {
      ...subComps.state,
      // other state
    },
    cmd: Cmd.batch(
      subComps.cmd,
      // other commands
    )
  }
}


export const actions = {
  ...subComps.actions,
  // ... other actions
}

export const view = (state: State, actions: Actions) => (
  <main>
    <h1>Counter1:</h1>
    {subComps.render('counter1', state, actions)}
    // euqal to:
    // {subComps.views.counter1(state.counter1, actions.counter1)}
    // .render('<key>', ...) won't not work with custom views that not match `(state, actions) => any` or `(props) => any` signature
    // So we still need `.views.counter1(...args)` in this case.
    <h1>Counter2:</h1>
    {subComps.render('counter2', state, actions)}
  </main>
)

import app, { Cmd } from 'hydux'

function upLater(n) {
  return new Promise(resolve => setTimeout(() => resolve(n + 10), 1000))
}
app({
  init: () => ({ count: 1}),
  actions: {
    down: () => state => ({ count: state.count - 1 }),
    up: () => state => ({ count: state.count + 1 }),
    upN: n => state => ({ count: state.count + n }),
    upLater: n => (
      state,
      actions/* actions of same level */
    ) => ({
      state, // don't change the state, won't trigger view update
      cmd: Cmd.ofPromise(
        upLater /* a function with single parameter and return a promise */,
        n /* the parameter of the funciton */,
        actions.upN /* success handler, optional */,
        console.error /* error handler, optional */ )
    }),
    // Short hand of command only
    upLater2: n => (
      state,
      actions/* actions of same level */
    ) => Cmd.ofPromise(
      upLater /* a function with single parameter and return a promise */,
      n /* the parameter of the funciton */,
      actions.upN /* success handler, optional */,
      console.error /* error handler, optional */
    ),
  },
  view: () => {/*...*/} ,
})