import { Component, Input, Output } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Image, ImagesService } from '../services/images.service';
import { MessagesService } from '../services/messages.service';
import { UsersService } from '../services/users.service';

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.scss']
})
export class ImageComponent {
    @Input()
    public image?: Image | null;
    public environment = environment;
    public deleted = false;

    public async like() {
        try {
            this.image = await this.images.like(this.image!.id);
        }
        catch (e: any) { this.msgs.error(e); }
    }
    public async unlike() {
        try {
            this.image = await this.images.unlike(this.image!.id);
        }
        catch (e: any) { this.msgs.error(e); }
    }
    public async delete() {
        try {
            await this.images.delete(this.image!.id);
            this.deleted = true;
        }
        catch (e: any) { this.msgs.error(e); }
    }

    public constructor(
        public images: ImagesService,
        public users: UsersService,
        private msgs: MessagesService,
    ) {}
}