// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { StoreModule } from "@smoosee/ngrx-manager";

import { AppComponent } from "./app.component";

import { StoreOptions, StatesConfigs } from "./app.store";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, StoreModule.forRoot(StoreOptions, StatesConfigs)],
  bootstrap: [AppComponent],
})
export class AppModule {}

// app.module.ts
import { NgModule } from "@angular/core";
import { StoreModule } from "@smoosee/ngrx-manager";

import { PageComponent } from "./page.component";

import { StoreOptions, StatesConfigs } from "./page.store";

@NgModule({
  declarations: [PageComponent],
  imports: [StoreModule.forChild(StatesConfigs, StoreOptions)],
})
export class PageModule {}

    // inject the `StoreFacade` service by using it in the constructor
    constructor(private storeFacade: StoreFacade) {}
    // OR
    storeFacade = inject(StoreFacade);


    // dispatch action to the store
    // will trigger the `increment` action
    // for the `Test` state
    this.storeFacade.dispatch("Test", "increment");

    // dispatch action to the store
    // will trigger the `SET` action
    // for the `App` state
    this.storeFacade.set("App", { name: "smoosee" });

    // dispatch action to the store
    // will trigger the `EXTEND` action
    // for the `App` state
    // which is basically extending the current state
    // with the new data instead of replacing it like the `SET` action
    this.storeFacade.extend("App", { name: "smoosee" });

    // dispatch action to the store
    // will trigger the `UNSET` action
    // for the `App` state
    this.storeFacade.unset("App");

    // clear all data from the store
    // this will trigger the `UNSET` action
    // for all states
    this.storeFacade.clear();

// app.component.ts
import { Component, OnInit } from "@angular/core";
import { StoreFacade } from "@smoosee/ngrx-manager";

@Component({
  selector: "app-root",
  template: `
    <div>value: {{ stateValue | json }}</div>
    <div>observable: {{ sateObservable | async | json }}</div>
    <div>signal: {{ stateSignal() | json }}</div>
  `,
})
export class AppComponent implements OnInit {
  // retrieve value of the state synchronously
  stateValue = this.facade.select("App");
  // retrieve value of the state asynchronously as Observable
  stateObservable = this.facade.select("App", true);
  // retrieve value of the state asynchronously as Signal
  stateSignal = this.facade.select("App", false);

  constructor(private facade: StoreFacade) {}

  ngOnInit() {}
}

// STEP 1
// create interfaces or classes of the states models.

interface AppState {
    set: boolean;
    extend: boolean;
}

interface SharedState {
    useThis: boolean;
    useThat: boolean;
}

// STEP 2
// generate the store state configs using the StoreState, StoreAction classes.
// Also use the state interfaces created in STEP 1 with the `initial` property

export const AppStoreStates = [
    new StoreState({
        name: 'App',
        initial: <AppState>{},
        actions: [
            new StoreAction({
                name: 'APP_TEST_1',
                service: AppService,
                method: 'testFn',
            }),
            new StoreAction({
                service: AppService,
                name: 'APP_TEST_2',
                method: 'testFn2',
            })
        ]
    }),
    new StoreState({
        name: 'Shared',
        initial: <SharedState>{},
        actions: [
            new StoreAction({
                name: 'Shared_TEST_1',
                service: AppService,
                method: 'testFn2',
            })
        ]
    })
];

// STEP 3
// use `StoreFacade<typeof AppStoreStates>`.
@Injectable({ provided: "root" })
export class AppFacade extends StoreFacade<typeof AppStoreStates> {
  constructor() {
    super();
  }
}