// the state slice names as enum elements 
export enum Slices {
  Example = 'example',
  Persisted = 'persistent'
}

//  the example state will just provide slice
export interface ExampleState {
  message: string; // will store a message to be shown
}
// the persistent state will be made persistent against the reload of application
export interface PersistedState {
  count: number; // will store an incrementable count
}

// root state interface representation of slices
export interface RootState {
  example: ExampleState,
  persistent: PersistedState
}

// object for initialization of redux state slices
export const initialExampleState: ExampleState = {
  message: '...'
}
export const initialPersistedState: PersistedState = {
  count: 0
}

import {
  IReduxConfig,
  ReduceableReducer,
  PersistentReduceableReducer,
} from "@hypereact/state";

export const reduxConfig: IReduxConfig = {
  example: new ReduceableReducer(initialExampleState),
  persistent: new PersistentReduceableReducer(initialPersistedState)
}

// initialize the singleton instance of StoreManager passing the configuration
// thus you can always get it in your code through StoreManager.getInstance() static function
const storeManager = StoreManager.getInstance(reduxConfig);

// render Provider with store prop as usual
ReactDOM.render(
  <Provider store={StoreManager.getInstance().getStore()}>
  <App />
  </Provider>,
  document.getElementById("root")
);

@ReduxAction("SET_EXAMPLE_MESSAGE", Slices.Example)
export class SetExampleMessageAction implements IReduceableAction<ExampleState> {
  constructor(public name: string) {}
  
  reduce(state: ExampleState) {
    state.message = `Hello ${this.name}`;
    return state;
  }
}

@ReduxAction("INCREMENT_PERSISTENT_COUNT", Slices.Persisted)
export class IncrementCountAction implements IReduceableAction<PersistedState> {
  constructor(public incrementBy: number = 1) {}

  reduce(state: PersistedState) {
    state.count += this.incrementBy;
    return state;
  }
}

interface AppProps {
  example?: ExampleState;
  persistent?: PersistedState;
}

// decorate with the React Redux mapStateToProps function as argument
@ReduxConnect((state: RootState) => {
  return {
    ...state,
  };
})
export class App extends React.Component<AppProps> {

  private handleGreet() {
    // dispatch actions
    const storeManager = StoreManager.getInstance();
    storeManager.dispatch(new SetExampleMessageAction("John"));
    storeManager.dispatch(new IncrementCountAction());
  }  

  render() {
    // use props bound to state slices
    const count = this.props.persistent!.count;
    const message = this.props.example!.message;
    return (
      <>
        <div>Clicked {count} with lastest greeting message "{message}".</div>
        <button onClick={this.handleGreet}>Greet</button>
      </>
    );
  }
}