import {Component} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {Decoration} from "../../models/model-interfaces";
import {DecorationService} from "../../services/decoration-service/decoration.service";

@Component({
  templateUrl: './decoration-overview.component.html',
  styleUrls: ['./decoration-overview.component.css', '../../style/overview.css'],
})
export class DecorationOverviewComponent {

  id: string;

  showSuccessLabel = false;

  showImageError = false;

  decoration: Decoration;

  fileList: FileList;

  previewImage;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private decorationService: DecorationService) {
  }

  ngOnInit() {
    this.route.params.subscribe((params) => {
      this.decorationService.getDecoration(params['id']).subscribe(decoration => {
        this.decoration = decoration;
        this.previewImage = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
      })
    })
  }

  // register file change and save to fileList
  fileChange(event) {
    if (!event.target.files[0].name.endsWith('.png')) {
      this.showImageError = true;
      this.fileList = undefined;
    } else {
      this.showImageError = false;
      this.fileList = event.target.files;
    }
  }

  update(attrName, inputField) {
    const inputValue = inputField.value;
    if (inputValue.length > 0 && (this.decoration[attrName] !== inputValue || attrName === 'description')) {
      const updateObject = {_id: this.decoration._id};
      updateObject[attrName] = inputValue;
      this.decorationService.submitDecoration(updateObject)
        .subscribe(decoration => {
          this.decoration = decoration;
          if (attrName != 'description') {
            inputField.value = '';
          }
          this.showSuccessLabel = true;
          setTimeout(() => {
            this.showSuccessLabel = false;
          }, 2000)
        })
    }
  }

  updateGraphic(fileInput) {
    if (this.fileList && this.fileList.length > 0) {
      let file: File = this.fileList[0];
      this.decorationService.submitDecoration({_id: this.decoration._id}, file)
        .subscribe((res) => {
          setTimeout(() => {
            this.previewImage = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
          }, 300);
          fileInput.value = '';
          this.showSuccessLabel = true;
          setTimeout(() => {
            this.showSuccessLabel = false;
          }, 2000)
        })
    }
  }

  deleteDecoration(confirm) {
    if (confirm.toLowerCase() === this.decoration.name.toLocaleLowerCase()) {
      this.decorationService.deleteDecoration(this.decoration)
        .subscribe((res) => {
          this.router.navigate(['../..'], {relativeTo: this.route});
        })
    }
  }

}