import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { ImageSource } from '@nativescript/core/image-source';
import { personIcon } from '~/constants/icons';
import { ImageService } from '../../../services/image.service';

@Component({
    selector: 'PersonPhoto',
    moduleId: module.id,
    templateUrl: './person-photo.component.html',
    styleUrls: ['./_person-photo.component.scss']
})
export class PersonPhotoComponent {
    private _personId: number;
    @Input()
    set personId(id) {
        if (this._personId != id) {
            this._personId = id;
            this.loadPhoto()
        }
    };
    missingImage = 'font://' + personIcon;
    get personId() {
        return this._personId;
    }
    photo: ImageSource
    photoLoading: boolean = true;
    constructor(
        private photoService: ImageService
    ) {
    }

    loadPhoto() {
        this.photo = null
        if (!this.personId) {
            this.photoLoading = false;
            return;
        }
        this.photoLoading = true
        this.photoService.loadPersonPhoto(this.personId).then(i => {
            this.photo = i;
            this.photoLoading = false
        })
    }
}
