import { Component, computed, inject, Input, OnInit } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { UntilDestroy } from '@ngneat/until-destroy';
import { environment } from '@env/environment';
import { ProfileViewModel } from '@app/ui/profiles/profile.presenter.model';
import { UserFacade } from '@app/ui/users/user.facade';

@Component({
  selector: 'app-vertical-profile-item',
  standalone: true,
  providers: [UserFacade],
  imports: [RouterLink],
  templateUrl: './vertical-profile-item.component.html',
  styleUrl: './vertical-profile-item.component.scss',
})
@UntilDestroy()
export class VerticalProfileItemComponent implements OnInit {
  @Input({ required: true }) profile: ProfileViewModel = {} as ProfileViewModel;
  protected router = inject(Router);
  private readonly facade = inject(UserFacade);

  protected user = this.facade.user;
  protected readonly loading = this.facade.loading;
  protected readonly error = this.facade.error;

  protected slug = computed(() => {
    const slug = this.user().slug ?? '';
    const profileId = this.profile.id ? this.profile.id : '';
    return slug === '' ? profileId : slug.concat('-', profileId);
  });

  ngOnInit(): void {
    this.facade.loadOne(this.profile.utilisateur);
  }

  protected readonly environment = environment;
}