import { Component, inject, input, OnChanges, SimpleChanges } from '@angular/core';
import { TitleCasePipe } from '@angular/common';
import { UntilDestroy } from '@ngneat/until-destroy';
import { SectorFacade } from '@app/adapters/sectors/sector.facade';

@Component({
  selector: 'app-chips',
  standalone: true,
  providers: [SectorFacade],
  imports: [TitleCasePipe],
  templateUrl: './chips.component.html',
  styleUrl: './chips.component.scss',
})
@UntilDestroy()
export class ChipsComponent implements OnChanges {
  sectorId = input.required<string>();

  private readonly sectorFacade = inject(SectorFacade);
  protected sector = this.sectorFacade.sector;
  protected readonly loading = this.sectorFacade.loading;
  protected readonly error = this.sectorFacade.error;

  ngOnChanges(changes: SimpleChanges) {
    if (this.sectorId() && !this.loading().isLoading) {
      this.sectorFacade.loadOne(this.sectorId());
    }
  }
}
