import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Decoration} from '../../../models/model-interfaces';
import {Fraction} from '../../../utils/fraction.enum';

@Component({
  selector: 'decoration-item',
  templateUrl: './decoration-item.component.html',
  styleUrls: ['./decoration-item.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DecorationItemComponent implements OnInit {

  @Input() selected: boolean;

  @Input() decoration: Decoration;

  @Output() decorationSelected = new EventEmitter();

  @Output() decorationDelete = new EventEmitter();

  imageSrc;

  imgStyle = {width: '', height: '', marginTop: ''};

  readonly fraction = Fraction;

  constructor() {
  }

  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);
  }

}