import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Router } from '@angular/router';
import { environment } from '@msfa-environment';
import { Employee } from '@msfa-models/employee.model';
import { Organization } from '@msfa-models/organization.model';
import { Role } from '@msfa-models/role.model';
import { RoleService } from '@msfa-services/role.service';
import { UserService } from '@msfa-services/user.service';
import { UiIconType } from '@ui/icon/icon-type.enum';
import { combineLatest, Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'msfa-my-account',
  templateUrl: './my-account.component.html',
  styleUrls: ['./my-account.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyAccountComponent {
  user$: Observable<Employee> = this.userService.user$;
  selectedOrganization$: Observable<Organization> = this.userService.selectedOrganization$;
  organizations$: Observable<Organization[]> = this.userService.organizations$;
  otherOrganizations$: Observable<Organization[]> = combineLatest([
    this.organizations$,
    this.selectedOrganization$,
  ]).pipe(
    filter(([organizations, selectedOrganization]) => !!(organizations?.length && selectedOrganization)),
    map(([organizations, selectedOrganization]) =>
      organizations.filter(organization => organization.organizationNumber !== selectedOrganization.organizationNumber)
    )
  );
  allRoles: Role[] = this.roleService.allRoles;
  selfServiceUrl = environment.ciam.selfServiceUrl;
  readonly IconType = UiIconType;

  constructor(private userService: UserService, private roleService: RoleService, private router: Router) {}

  loginWithOrganization(organization: Organization): void {
    this.userService.setSelectedOrganization(organization);
  }
}
