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

import { Pizza } from '../../models/pizza.model';

export const DROP_ANIMATION = trigger('drop', [
  transition(':enter', [
    style({ transform: 'translateY(-200px)', opacity: 0 }),
    animate(
      '300ms cubic-bezier(1.000, 0.000, 0.000, 1.000)',
      style({ transform: 'translateY(0)', opacity: 1 })
    ),
  ]),
  transition(':leave', [
    style({ transform: 'translateY(0)', opacity: 1 }),
    animate(
      '200ms cubic-bezier(1.000, 0.000, 0.000, 1.000)',
      style({ transform: 'translateY(-200px)', opacity: 0 })
    ),
  ]),
]);

@Component({
  selector: 'pizza-display',
  animations: [DROP_ANIMATION],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['pizza-display.component.scss'],
  template: `
    <div class="pizza-display">
      <div class="pizza-display__base">
        <img src="/assets/img/pizza.svg">
        <img 
          *ngFor="let topping of pizza?.toppings; index as i;"
          src="/assets/img/toppings/{{ topping.name }}.svg" 
          [style.zIndex]="i"
          class="pizza-display__topping"
          @drop>
      </div>
    </div>
  `,
})
export class PizzaDisplayComponent {
  @Input() pizza: Pizza;
}