import {AfterViewInit, Directive, ElementRef, Input, OnDestroy} from '@angular/core';
import {PropertyTypeEnum} from '@maplander/types';

@Directive({
  selector: '[libImageError]'
})
export class ImageErrorDirective implements AfterViewInit, OnDestroy {

  @Input() typeImage: PropertyTypeEnum;
  private _el: HTMLImageElement;
  private _onError;
  private readonly CDN_URL: string = 'https://storage.googleapis.com/maplander-develop/public/file/front-end/cdn/images-stock';

  constructor(private _ref: ElementRef) {
    this._el = this._ref.nativeElement;
    if (this._el.constructor !== HTMLImageElement) {
      throw new Error('libImageError directive works only image element');
    }
  }

  ngAfterViewInit(): void {
    this._onError = () => {
      this.updateUrl();
    };
    this._el.addEventListener('error', this._onError);
  }

  ngOnDestroy(): void {
    this._el.removeEventListener('error', this._onError);
  }

  updateUrl() {
    switch (this.typeImage) {
      case PropertyTypeEnum.HOUSE:
        this._el.src = `${this.CDN_URL}/Stock-House.jpg`;
        break;
      case PropertyTypeEnum.OFFICE:
        this._el.src = `${this.CDN_URL}/Stock-Office.jpg`;
        break;
      case PropertyTypeEnum.RETAIL:
        this._el.src = `${this.CDN_URL}/Stock-Retail.jpg`;
        break;
      case PropertyTypeEnum.LAND:
        this._el.src = `${this.CDN_URL}/Stock-Land.jpg`;
        break;
      case PropertyTypeEnum.WAREHOUSE:
        this._el.src = `${this.CDN_URL}/Stock-Warehouse.jpg`;
        break;
      case PropertyTypeEnum.APARTMENT:
      case PropertyTypeEnum.ROOM:
        this._el.src = `${this.CDN_URL}/Stock-Apartment.jpg`;
        break;
      case PropertyTypeEnum.INVESTMENT:
        this._el.src = `${this.CDN_URL}/Stock-Investment.jpg`;
        break;
      case PropertyTypeEnum.RESIDENTIAL:
        this._el.src = `${this.CDN_URL}/Stock-House.jpg`;
        break;
      default:
        this._el.src = `${this.CDN_URL}/Stock-House.jpg`;
        break;
    }
  }

}