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

@Component({
  selector: 'event-component',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.css'],
  animations:[
      trigger("inout",[
        state("1", style({ opacity: '1', transform:'translateX(0)' })),
        state("0",style({ opacity: '0', transform:'translateX(5%)' })),
        transition('* => 1',[
            animate('500ms ease-in-out')
        ]),
        transition(':enter',[
            animate('0ms')
        ])
      ])
  ]
})
export class EventComponent implements AfterContentInit {
    @Input()
    title: string;
    @Input()
    description: string;
    @Input()
    startDate: Date;
    @Input()
    endDate: Date;
    public startFadeIn: boolean = false;
    @Input()
    public delayFadeIn: number = 100;

    constructor(){
    }

    ngAfterContentInit(): void{
        setTimeout(() => this.startFadeIn = true, this.delayFadeIn);
    }
}