import { Component, computed, inject, input } from '@angular/core';
import { Router } from '@angular/router';
import { PageShellComponent } from '@shared/ui/templates/page-shell.component';
import { AsyncComponent } from '@shared/ui/molecules/async.component';
import { fromResource } from '@shared/application/remote-data';
import { UserListComponent } from '@users/ui/organisms/user-list.component';
import { UserDetailComponent } from '@users/ui/organisms/user-detail.component';
import { usersResource } from '@users/application/users.resource';
import { isEmptyUserList } from '@users/domain/user';

@Component({
  selector: 'app-users-page',
  imports: [PageShellComponent, AsyncComponent, UserListComponent, UserDetailComponent],
  template: `
    <app-page-shell heading="Users">
      @if (selectedUserId(); as id) {
        <app-user-detail [userId]="id" (close)="router.navigate(['/users'])" />
      } @else {
        @let list = listData();
        <app-async [data]="list" (retry)="usersResource.reload()">
          @if (list.tag === 'Success' && list.value) {
            <app-user-list [users]="list.value" (select)="router.navigate(['/users', $event])" />
          }
        </app-async>
      }
    </app-page-shell>
  `,
})
export class UsersPage {
  protected router = inject(Router);
  userId = input<string>();
  protected selectedUserId = computed(() => {
    const id = this.userId();
    return id ? Number(id) : null;
  });
  protected usersResource = usersResource();
  protected listData = computed(() => fromResource(this.usersResource, isEmptyUserList));
}