import { Component,Input ,ViewChild,ElementRef,ChangeDetectorRef, Output,EventEmitter} from '@angular/core';
import { Store } from '@ngrx/store';

import { IListItem  } from '../../models/list.item';
import { ImageService } from '../../services/image.service';
import { commonReducers,ItemTypeService } from '../../../public-api'
import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.component';
import { AppConfig } from "../../shared/app.config";

@Component({
    selector: 'fm-thumbnail',
    templateUrl: 'thumbnail.component.html',
    styleUrls: ['thumbnail.component.scss']
  })
  
  
  export class ThumbnailComponent {
    @Input() public item: IListItem;
    @Input() public edit = false;
    @Input() public save = true;
    @Output() changed = new EventEmitter();
    @ViewChild('thumbnail') el:ElementRef;
    @ViewChild('modal') modal:EditImageModalComponent;

    public image = null;
    private endpoint = "";
    public thumnailUrl = "";

    constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,public appConfig: AppConfig,private changeDetector:ChangeDetectorRef,public imageService:ImageService) {
    }

    getThumbnailUrl(item:IListItem):string {
        if(this.image == null && this.item.thumbnail) {
            this.thumnailUrl = this.appConfig.getConfig("apiEndPoint")+item.url+'/thumbnail?v=' + Date.parse(item.updated);
        } else if (this.image == null) {
            this.thumnailUrl = "";
        } 
        return this.thumnailUrl;
    }

    getFontSize():string {        
        if(this.el) {
            const h = this.el.nativeElement.offsetHeight - (this.el.nativeElement.offsetHeight / 5 )
            return  h + "px";
        } else {
            return "1em";
        }
    }

    getLineHeight():string {
        if(this.el) {
            return  this.el.nativeElement.offsetHeight + "px";
        } else {
            return "1em";
        }
    }

    canEdit():boolean {
        return this.edit && this.item != null;
    }

    hasThumbnail():boolean {
        return (this.item && this.item.thumbnail) || this.image != null;
    }

    onEditClick() {
       this.endpoint = `${this.appConfig.getConfig("apiEndPoint")}/api/v1/items/${this.item.code}/thumbnail`;
       this.modal.open(this.endpoint,4/3,false,200,false);
    }

    onChanged(event:any) {
        this.image = event.croppedImage;
        this.imageService.blobToDataUrl(event.croppedImage).then(url => {
           this.thumnailUrl = url
           this.changeDetector.detectChanges();           
           if(this.save) this.saveImage();
           this.changed.emit(event.croppedImage);
        });                
    }

    saveImage() {
        if(this.image) {
          this.imageService.putImage(this.endpoint,this.image).subscribe(() => {});      
        }
      }
  }