// Angular-Typen
import { Component, OnInit, Input, Output, SimpleChanges } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Params } from '@angular/router';

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

// andere Frameworks
import { Observable } from 'rxjs/Rx';
// eigene Typen
import { Flug } from '../Modell/Flug'
import { FlugService } from '../Services/FlugService'

@Component({
 selector: 'FlugEdit',
 templateUrl: '/app/FlugEdit/FlugEdit.html',
 styleUrls: ['app/FlugEdit/FlugEdit.css'],
 providers: [FlugService], // für Dependency Injection
 host: {
  '[@routeAnimation]': "true"
 },
 animations: [ // Ein- und Ausblendeanimation für ein Formular
  trigger('routeAnimation', [
   state('*', style({ transform: 'translateX(0)', opacity: 100 })),
   transition('void => *', [
    style({ transform: 'translateX(-100%)', opacity: 0 }),
    animate('4.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)')
   ]),
   transition('* => void',
    animate('4.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)', style({
     transform: 'translateX(100%)',
     opacity: 0
    }))
   )
  ])
 ]
})

export class FlugEdit implements OnInit {

 orte = ['Rom', 'Paris', 'Berlin', 'Oslo'];

 flug: Flug;

 private status: string;

 constructor(private flugService: FlugService,
  private route: ActivatedRoute, private titleService: Title) { // hier wird FlugService injeziert
  console.log("Konstruktor!!!");
 }

 ngOnInit() {
  this.route.params.forEach((params: Params) => {
   let id = +params['id'];
   if (!id) id = 101; // nur zum Test
   this.flug = this.flugService.getByID(id);
   this.titleService.setTitle("Edit " + id);
  });

 }

 ngOnChanges(changes: SimpleChanges) {
  console.log(changes);
 }

 tasteGedrueckt(event: any) {
  console.log(event, event.keyCode, event.keyIdentifier);
 }

 reset() {
  this.flug.Abflugort = "Rom";
  this.flug.Zielort = "Berlin";

  this.status = "zurückgesetzt";
  // alert("Werte zurückgesetzt");
 }

 save() {

  this.status = "gespeichert";
  console.log(this.flug);
  console.log(this.flugService.getByID(this.flug.FlugNr));
  // alert("gespeichert!");
  // alert("Werte zurückgesetzt!");
 }
 get getstring(): string { return this.status; }
 get getJson(): string { return JSON.stringify(this.flug); }
}