import {ChangeDetectionStrategy, Component, EventEmitter} from "@angular/core";
import {Router} from "@angular/router";
import {Decoration} from "../../models/model-interfaces";

@Component({
  selector: 'pjm-decoration-item',
  templateUrl: './decoration-item.component.html',
  styleUrls: ['./decoration-item.component.css', '../../style/list-entry.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  inputs: ['decoration', 'selected'],
  outputs: ['decorationDelete','decorationSelected'],
})
export class DecorationItemComponent {

  selected: boolean;
  decoration: Decoration;
  imageSrc;
  imgStyle = {width: '', height: '', marginTop: ''};

  decorationSelected = new EventEmitter();
  decorationDelete = new EventEmitter();

  constructor(private router: Router) {
  }

  ngOnInit() {
    this.imageSrc = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
    if (!this.decoration.isMedal) {
      this.imgStyle.width = '62px';
      this.imgStyle.marginTop = '17px'
    } else {
      this.imgStyle.height = '50px';
      this.imgStyle.marginTop = '3px'
    }
  }

  select() {
    this.decorationSelected.emit(this.decoration._id)
  }

  delete() {
    this.decorationDelete.emit(this.decoration);
  }

}