// Store definition
@Injectable()
export class EmployeeListStore extends PlatformVmStore<EmployeeListVm> {
    constructor(private employeeApi: EmployeeApiService) {
        super();
    }

    // Optional: Enable caching
    protected get enableCaching() {
        return true;
    }
    protected cachedStateKeyName = () => 'EmployeeListStore';

    // ViewModel constructor
    protected vmConstructor = (data?: Partial<EmployeeListVm>) => new EmployeeListVm(data);

    // Effects
    public loadEmployees = this.effectSimple(
        () => this.employeeApi.getEmployees().pipe(this.tapResponse(employees => this.updateState({ employees }))),
        'loadEmployees'
    );

    public deleteEmployee = this.effectSimple(
        (id: string) =>
            this.employeeApi.delete(id).pipe(
                this.tapResponse(() =>
                    this.updateState(state => ({
                        employees: state.employees.filter(e => e.id !== id)
                    }))
                )
            ),
        'deleteEmployee'
    );

    // Selectors
    public readonly employees$ = this.select(state => state.employees);
    public readonly activeCount$ = this.select(state => state.employees.filter(e => e.isActive).length);
    public readonly isLoading$ = this.isLoading$('loadEmployees');
}

@Component({
    selector: 'app-employee-list',
    template: `
        <app-loading-and-error-indicator [target]="this">
            @if (vm(); as vm) {
                @for (emp of vm.employees; track emp.id) {
                    <div>{{ emp.name }}</div>
                }
            }
        </app-loading-and-error-indicator>
    `,
    providers: [EmployeeListStore]
})
export class EmployeeListComponent extends AppBaseVmStoreComponent<EmployeeListVm, EmployeeListStore> {
    constructor(store: EmployeeListStore) {
        super(store);
    }

    ngOnInit() {
        this.store.loadEmployees();
    }

    onRefresh() {
        this.reload(); // Reloads all store effects
    }

    onDelete(id: string) {
        this.store.deleteEmployee(id);
    }
}

export class EmployeeListVm {
    employees: EmployeeDto[] = [];
    selectedId?: string;
    filters: EmployeeFilters = new EmployeeFilters();

    constructor(data?: Partial<EmployeeListVm>) {
        Object.assign(this, data);
    }
}