import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { EnvironmentService } from 'src/environments/environment.service';
import { AccountAvatarRecord } from '../../server-services/query-records/account-records';
import { BlobService } from '../../services/blob.service';
import { styleChangedObserver } from '../../shared-observers';
import { AppStorage } from 'src/app/shared/app-storage';
import { AccountService, UserVerificationState } from '../../server-services/account.service';
import { SubscriptionService } from '../../server-services/subscription.service';
import {
  SubscriptionServiceEvent,
  SubscriptionServiceEventType,
} from '../../server-services/subscription-event';

@Component({
  selector: 'app-avatar',
  templateUrl: './avatar.component.html',
  styleUrls: ['./avatar.component.scss'],
})
export class AvatarComponent implements OnChanges, OnDestroy, OnInit {
  @Input() img?: string;
  @Input() accountAvatarRecord?: AccountAvatarRecord;
  @Input() blob?: ArrayBuffer;
  @Input() verify?: boolean;
  public src: string = '';
  public isTrustVerified: boolean = false;
  public isTrustDangerous: boolean = false;

  constructor(
    private environmentService: EnvironmentService,
    private blobService: BlobService,
    private accountService: AccountService,
    private subscriptionService: SubscriptionService
  ) {
    styleChangedObserver.subscribe(() => this.onChanges());
  }

  ngOnInit(): void {
    if (this.verify !== undefined && this.accountAvatarRecord)
      this.subscriptionService.subscribe(
        SubscriptionServiceEvent.ACCOUNT_TRUST_EVENT,
        SubscriptionServiceEventType.ALL,
        this.verifyUser
      );
    this.verifyUser();
  }

  private verifyUser = () => {
    if (this.verify !== undefined && this.accountAvatarRecord) {
      this.accountService.getUserVerificationState(this.accountAvatarRecord.id).then((ver) => {
        this.isTrustVerified = ver == UserVerificationState.VERIFIED;
        this.isTrustDangerous = ver == UserVerificationState.DANGEROUS;
      });
    }
  };

  ngOnChanges(changes: SimpleChanges): void {
    this.verifyUser();
    this.onChanges();
  }

  private onChanges(): void {
    if (this.accountAvatarRecord?.avatarImageKey) {
      this.src =
        this.environmentService.url_api +
        '/r/avatar/' +
        this.accountAvatarRecord.id +
        '/' +
        this.accountAvatarRecord.avatarImageKey;
    } else if (this.accountAvatarRecord?.deleted) {
      this.setDeletedImage();
    } else if (this.img) {
      this.src = this.img;
    } else if (this.blob) {
      var urlCreator = window.URL || window.webkitURL;
      this.src = urlCreator.createObjectURL(this.blobService.new([this.blob]));
    } else {
      this.setDefaultImage();
    }
  }

  setDefaultImage() {
    var styleMode = AppStorage.getItem('style_mode');
    if (this.accountAvatarRecord) this.src = `/assets/img/ui/user-${styleMode}.svg`;
    else this.src = `/assets/img/ui/room-${styleMode}.svg`;
  }

  setDeletedImage() {
    var styleMode = AppStorage.getItem('style_mode');
    if (this.accountAvatarRecord) this.src = `/assets/img/ui/user-${styleMode}-deleted.svg`;
    else this.src = `/assets/img/ui/room-${styleMode}-deleted.svg`;
  }

  ngOnDestroy(): void {
    var urlCreator = window.URL || window.webkitURL;
    urlCreator.revokeObjectURL(this.src);

    if (this.verify !== undefined && this.accountAvatarRecord) {
      this.subscriptionService.unsubscribe(
        SubscriptionServiceEvent.ACCOUNT_TRUST_EVENT,
        SubscriptionServiceEventType.ALL,
        this.verifyUser
      );
    }
  }
}
