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

@Component({
  selector: 'app-loading',
  template: `
    <ng-container *ngIf="loading" [@loading]="loading">
      <img src="/assets/images/Icon_Loading.svg" class="rotate" [@loading]="loading" />
      <span>{{ text }}</span>
    </ng-container>
  `,
  styleUrls: ['loading.component.scss'],
  animations: [
    trigger('loading', [
      state('void', style({ opacity: 0, transform: 'translateY(-100%)' })),
      transition(':enter', [animate('0.2s ease-in'), style({ opacity: 1, transform: 'translateY(0)' })]),
      transition(':leave', [animate('0.2s ease-in', style({ opacity: 0, transform: 'translateY(-100%)' }))]),
    ]),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoadingComponent implements OnInit {
  @Input() loading = false;
  @Input() text = '';
  constructor() {}

  ngOnInit() {}
}
