import { Component, OnInit, trigger, state, style, animate, transition, Input } from '@angular/core';

@Component({
  selector: 'app-reload-button',
  template: `
    <md-icon *ngIf='!hidden' @appearanceAnimation aria-label="reload">replay</md-icon>
  `,
  animations: [
    trigger(
      'appearanceAnimation',
      [
        transition(
        ':enter', [
          style({transform: 'rotateZ(360deg)', opacity: 0}),
          animate('200ms', style({transform: 'rotateZ(0deg)', opacity: 1}))
        ]
      ),
      transition(
        ':leave', [
          style({transform: 'rotateZ(0)', 'opacity': 1}),
          animate('200ms', style({transform: 'rotateZ(-360deg)', opacity: 0})),
        ]
      )]
    )
  ],
  styleUrls: ['./reload-button.component.css']
})
export class ReloadButtonComponent implements OnInit {
  @Input()
  hidden;

  constructor() { }

  ngOnInit() {
  }

}