import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnChanges,
  Output,
  SimpleChanges,
} from '@angular/core';

@Component({
  selector: 'app-avatar',
  templateUrl: './avatar.component.html',
  styleUrls: ['./avatar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AvatarComponent implements OnChanges {
  @Input() src = '';
  @Input() widthInPx = 120;
  @Input() canUpload = false;

  @Output() onClicK = new EventEmitter<void>();

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['src']?.currentValue) {
      const url = (changes['src']?.currentValue ?? '') as string;

      if (url.startsWith('blob')) return;

      const timestamp = new Date().getTime();
      this.src = `${this.src}?timestamp=${timestamp}`;
    }
  }

  handleClick() {
    this.onClicK.emit();
  }
}
